首先先介绍一下:AngularJS是干什么的。

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

开始学习AngularJs，先创建一个经典应用程序"Hello World"

使用你最喜欢的编译器，创建一个HTML文件，例如angulary.html

源码:

<html>
   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
   </head>
   <body ng-app>
    <div>
      <input type="text" ng-model="World" placeholder="Enter a name here">
      <h1>Hello, {{World}}!</h1>
    </div>
   </body>
</html>

运行HelloWorld 效果:

输入文字之前

输入文字之后

下面我们介绍一下我们都干了什么?

ng-app

ng-model="World"

{{World}}

首先 要写上最重要的部分 元素的ng-app属性。少了这个属性，AngularJS就没法开始工作。

ng-app可以放到<html>标签中也可以放到 当前<div>中。

其次，我们告诉AngularJS，对页面上的“World”也就是在输入时候的 ng-model="World"属性， 这个Model进行双向数据绑定。<input type="text" ng-model="World" placeholder="Enter a name here">

最后，我们告诉AngularJS，在“{{ World}}”这个指令模版上显示“World”这个Model的数据。

希望此文章对大家学习AngularJS有所帮助，本人能力有限，文章有不足之处欢迎指正。

本次学习来自伯乐在线的 七步AngularJS

AngularJs学习第一课 Hello World的更多相关文章

  1. AngularJS学习第一课

    AngularJS2与AngularJS1有很大的不同. AngularJS2支持ECMAScript6,为了提升性能,支持移动化开发(安卓.ios平台),因此升级为AngularJS 2,Angul ...

  2. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  3. Elasticsearch7.X 入门学习第一课笔记----基本概念

    原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...

  4. MFC学习-第一课 MFC运行机制

    最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...

  5. python学习第一课要点记录

    写在要点之前的一段话,留给将来的自己:第一次参加编程的培训班,很兴奋很激动,之前都是自己在网上找免费的视频来看,然后跟着写一些课程中的代码,都是照着模子写,没有自己过多的思考.感觉这样学不好,除了多写 ...

  6. python学习第一课

    第一课: 1.不要使用来路不明的软件 2.下载杀毒软件 3.不懂技术的人在技术人面前会显得愈发无知 4.python无所不能 需要掌握的知识: 1.python基本语法 2.文件处理 3.函数 4.模 ...

  7. angularjs学习第一天笔记

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  8. Kotlin学习第一课：从对比Java开始

    1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...

  9. Asp.net MVC4高级编程学习笔记-视图学习第一课20171009

    首先解释下:本文只是对Asp.net MVC4高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...

随机推荐

  1. Spring注意事项(各部分理解)

    (1),每一个bean属性,就是一个普通的java类. 类有属性,有方法,如何交给容器管理.(注解的方式,xml方式配置) (2),通过Bean来实例化对象的方式 1.通过构造器(一般是无参的默认构造 ...

  2. 解析大型.NET ERP系统 窗体、查询、报表二次开发

    详细介绍Enterprise Solution 二次开发的流程步骤,主要包括数据输入窗体(Entry Form),查询(Query/Enquiry),报表(Report)三个重要的二次开发项目. 数据 ...

  3. 【WP 8.1开发】如何把自定义字体塞进应用里

    或许,系统自带的字体不足以体现应用程序的魅力,对于表现极强的汉字来说,更是如此.这时候,我们就会想,要是能把网上下载的艺术字体塞到应用包中,那岂不美哉?那么,这可以实现吗?答案是Yes的. 接下来,阿 ...

  4. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  5. How does Spring @Transactional Really Work?--转

    原文地址:http://blog.jhades.org/how-does-spring-transactional-really-work/ In this post we will do a dee ...

  6. Shine.js – 帮助你实现各种好看的阴影效果

    Shine.js 是一个用于实现漂亮阴影的 JavaScript 库.您可以设置动态光的位置,可定制的阴影.不依赖于第三方库,兼容 AMD.能在支持 textShadow 或 boxShadow 的浏 ...

  7. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. WIN7 共享网络方法

    WIN7 共享网络方法 第一步: 按WIN+R调出“运行”栏,在“运行”菜单栏输入“cmd”,出现命令提示符,输入命令“netsh wlan set hostednetwork mode=allow ...

  9. 创建数据库和表相关的SQL语句

    SQL server注释语句有两种: 一种是单行注释,一种是多行注释. ******************** 单行注释用:--注释一行内容 多行注释用:/* *注释 *多行内容 */ 创建数据库: ...

  10. jQuery选择器(一)

    晚上闲着没事,正好用来整理下jQuery的选择器,毕竟没有总结就不算学习嘛. 首先,对事件处理.遍历DOM和Ajax操作,都依赖于选择器. 1.CSS选择器 要使用某个HTML元素,就先要找到它,而c ...