首页 > 代码库 > 《AngularJS即学即用》读书笔记(一)
《AngularJS即学即用》读书笔记(一)
最近在学习angularJS,就买了一本《AngularJS即学即用》作为自己的入门书籍,到目前为止看了两章的内容,感觉这本书还是不错的,东西讲的浅显易懂。之所以写这篇文章,一是督促自己能够坚持学习,二是能够给自己一个回头复习的机会,同时也希望能够帮到想学习Angular的同学一二。
这个系列的文章都是采用“笔记+个人理解”的方式来写。会把比较重要的内容摘抄出来,同时有的地方也会谈谈个人理解。
作为第一篇,主要做一个angular入门,结合一个入门示例,了解一下如何构建AngularJS应用:
1 <!DOCTYPE html> 2 <html ng-app=""> <!-- 通过ng-app指令来启动AngularJS,它的作用是指定HTML中哪一部分归AugularJS控制 --> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <h1>Hello {{1 + 2}}</h1> 9 </body> 10 <script src="http://www.mamicode.com/js/angular.min.js" type="text/javascript" charset="utf-8"></script> 11 </html>
要构建一个AngularJS应用:
(1)第一步引入AngularJS库,可以是CDN,也可以是本地,我这里是本地
1
|
< script src="http://www.mamicode.com/js/angular.min.js" type="text/javascript" charset="utf-8"></ script > |
(2)告诉页面中的哪一部分受AngularJS控制,启动AngularJS
在AngularJS中,我们可以手动指定AngularJS的控制范围,通过“ng-app”指令
在之前的示例中,我们在<html>的开始标签中添加了“ ng-app=‘‘ ”,通过这个指令达到两个目的:
- 指定AngularJS的控制范围
- 启动AngularJS
这个指令是可以传入一个参数的,这个参数就是angularJS的模块的名称,这个到了模块再说。
当我们指定<html>标签为AngularJS的控制范围时,<html>标签中的所有子节点都处于AngularJS的控制下。
除了以上两点之外,我们还注意到了一个特殊的地方——{{ 1+2 }}
花括号在AngularJS中表示数据绑定。这种数据绑定可以是单向的数据绑定,也可以是某个表达式。
- 如果是一个变量(单向的数据绑定),那么当这个变量的值改变时,UI会随之变化。
- 如果是一个表达式,则AngularJS会将计算后的值呈现在UI上。
看懂了入门示例,再看一个示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body ng-app=""> 8 <!-- 9 ng-model指令:用于获取用户输入的值并存储在name变量中 10 --> 11 <input type="text" placeholder="请输入你的姓名" ng-model="name" /> 12 <!-- 13 ng-bind指令:与{{}}是等价的 14 --> 15 <h1>Hello,<span ng-bind="name"></span></h1> 16 <h1>Hello,{{name}}</h1> 17 </body> 18 <script src="http://www.mamicode.com/js/angular.min.js" type="text/javascript" charset="utf-8"></script> 19 </html>
除了之前说到过的“ng-app”指令,这个例子中新出现了“ng-model”和“ng-bind”指令。
(1)ng-model指令:这个指令可以用于输入控件中,当用户想要输入数据或者从JavaScript变量中获取值时都可以使用它。
ng-model="name"在此例中表示将获取到的值(input)传递给name变量。
(2)ng-bind指令:和“{{}}”的作用是一样的,绑定数据。但是ng-bind和{{}}在效率上会有一些差异,我们需要了解以下两点:
① “{{}}”在AngularJS执行时,会先转换成ng-bind再执行,所以效率会低,但是写法简单。
② 使用“{{}}”来绑定数据时,在UI上“{{}}”会一闪而过。虽然比较短,还是可以发现的。解决办法是在使用了“{{}}”的元素上添加一个样式“ng-cloak”,这是一段样式,作用就是先把这段元素隐藏起来,等转换结束后再显示,样式代码核心就是“display:none !important;”最好是自己写,也可以用AngularJS定义好的,但是这样需要在开头先引入AngularJS文件
[转发自http://www.cnblogs.com/enjoymylift/p/6051455.html]
《AngularJS即学即用》读书笔记(一)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。