《AngularJS即学即用》读书笔记（一）

时间：2016-11-13 22:24:48 阅读：267 评论：0 收藏：0 [点我收藏+]

标签：自己的 plain bar 技术分享 html head 技术例子 char

最近在学习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="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
11 </html>

要构建一个AngularJS应用：

（1）第一步引入AngularJS库，可以是CDN，也可以是本地，我这里是本地

<script src="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="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即学即用》读书笔记（一）

标签：自己的 plain bar 技术分享 html head 技术例子 char

原文地址：http://www.cnblogs.com/gw1016/p/6059782.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行