本节书摘来自华章出版社《AngularJS实战》一 书中的第1章，第1.2节，作者：陶国荣，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
首先，我们来编写一个简单的Angular应用，参见下列的示例。示例1-1 编写一个简单的Angular程序（1）功能描述当页面加载时，在页面的正文部分显示“Hello，欢迎来到angular世界！”的字样。（2）实现代码新建一个HTML文件1-1.html，加入如代码清单1-1所示的代码。代码清单1-1 第一个简单的Angular程序
<!doctype html> <html ng-app> <head> <title>第一个简单的angular程序</title> <script src="../Script/angular.min.js" type="text/javascript"></script> </head> <body> {{'Hello,欢迎来到angular世界！'}} </body> </html>（3）页面效果HTML文件1-1.html最终实现的页面效果如图1-2所示。
（4）源码分析在本示例的代码中，我们先在元素中增加了一个“ng-app”属性，这一属性的功能是通知引入的Angular文件框架，页面中的哪个部分开始接受它的管理。既然是在元素中增加这个属性，表明Angular可以管理整个页面文件，“ng-app”属性还可以添加至某个
元素中，表明仅在这个 范围内，可以调用Angular框架管理其中包含的DOM元素。 此外，在页面的元素中，使用两个大括号的方式包含了一个字符串，其中两个大括号是Angular框架插入动态数据的一种方式，我们称之为“双花括号插值语法”。在通常情况下，通过这种方式插入的数据均为表达式，并且在插入时已获取了表达式的结果值，并直接将该值显示在页面中。在本实例中，由于表达式是字符串内容，因此，直接显示在页面中。 接下来，我们再来看一个Angular示例，进一步了解Angular数据插入功能。 示例1-2 编写一个具有计算功能的Angular程序 （1）功能描述 当页面加载时，在页面的正文部分通过插入数据的方式计算任意一对数值的和，并将计算后的结果显示在页面中。 （2）实现代码 新建一个HTML文件1-2.html，加入如代码清单1-2所示的代码。 代码清单1-2 一个计算功能的Angular程序 <!doctype html> <html ng-app> <head> <title>一个计算功能的angular程序</title> <script src="../Script/angular.min.js" type="text/javascript"></script> </head> <body> <h3>计算并显示下列两个数值的和</h3> 1.98 + 2.98 = {{ 1.98 + 2.98 | number:0}} </body> </html>（3）页面效果HTML文件1-1.html最终实现的页面效果如图1-3所示。
（4）源码分析在本示例的代码中，除了在元素中添加“ng-app”属性，表明整个页面代码都由Angular框架进行管理外，在使用双花括号插入数值时，先通过加号“+”运算符计算出两个数值的结果并返回给页面，然后，在计算数值时使用了一个“|”管道符号，这个符号在Angular中表示调用过滤器格式化数据，它的调用方法如下。
{{exp | f?iltername : para1:...paraN}}在上述调用方法中，exp表示Angular可以识别的任意表达式，f?iltername表示过滤器的名称。Angular内置了很多的过滤器，如currency、date、number和uppercase等，para1表示对过滤器功能的进一步描述，如示例中的“number:0”表示除掉小数后的数值，保留整数部分。当然，除使用Angular内置的过滤器外，还可以自定义自己的过滤器，具体实现的方式将会在后续的章节中进行详细的介绍。通过上述两个示例的介绍，相信大家已经被Angular的语法所吸引，更被它“神奇”的数据插入功能所折服。上述两个示例都采用以双花括号插入表达式的形式，将数据添加至页面的模板中，如果将表达式的数据与页面中的元素直接进行绑定，又会发生什么样的事情呢？接下来，我们再来看一个简单的示例。示例1-3 编写一个绑定页面元素的Angular程序（1）功能描述在页面中，先添加一个用于文本输入的元素，并通过Angular指令绑定一个表达式，然后，再添加一个
元素，通过Angular中的双花括号插入相同的表达式，当文本输入框中的内容变化时， 元素插入的内容也随之发生变化。 （2）实现代码 新建一个HTML文件1-3.html，加入如代码清单1-3所示的代码。 代码清单1-3 一个绑定页面元素的Angular程序 <!doctype html> <html ng-app> <head> <title>一个绑定页面元素的angular程序</title> <script src="../Script/angular.min.js" type="text/javascript"></script> </head> <body> <h3>请在下列文本框中输入任意内容</h3> <div ng-controller="usercontroller"> <input id="Text1" type="text" ng-model="user.name" /> <div>{{user.name}}</div> </div> <script type="text/javascript"> function usercontroller($scope) { $scope.user = { name: "" }; } </script> </body> </html>（3）页面效果HTML文件1-3.html最终实现的页面效果如图1-4所示。
（4）源码分析在本示例的源代码中，在元素中添加了“ng-app”属性，表明Angular可以管理整个页面。此外，向
元素添加了一个名为“ng-controller”的属性，该属性是Angular的另外一个指令，用来声明Angular中控制器类的名称，并且这个被声明的类将管理 中的全部元素。接下来，再向文本框元素添加一个“ng-model”属性，绑定逻辑层中的user.name数据，并同时通过双花括号向页面中的另外一个
元素插入相同的user.name内容。在Angular中，使用“ng-model”方式绑定数据是双向变化的，即如果数据源发生了变化，被绑定的元素中的内容也将会自动进行同步变化，反之，数据源也会随被绑定的元素值的变化而变化。 因此，当用户在文本框中输入任意内容时，改变了绑定的数据源，而其他插入的相同数据源也将随之进行同步，页面插入的user.name内容也将跟随变化，而实现这一切，都无需注册任何文本框的change事件去监听，就可以让页面中的元素绑定的数据自动刷新。 这一特征也同样适用于服务器端的更新，即当我们向服务器请求一个数据时获取了最新的user.name值，而在页面中绑定的输入框内容和插入显示的数据也将会同时自动更新为最新值。 除此之外，Angular还可以通过数据绑定的方式，将重复格式的多项数据内容显示在页面各个元素中，接下来我们再通过一个简单的示例来进行说明。 示例1-4 编写一个绑定多个页面元素的Angular程序 （1）功能描述 在页面中，通过Angular中的数据元素绑定的方式，将一个数组集合中的各项元素与页面中的多个 元素绑定，并通过遍历的方式将全部数据插入至页面的模板中。（2）实现代码新建一个HTML文件1-4.html，加入如代码清单1-4所示的代码。代码清单1-4 一个绑定多个页面元素的Angular程序 <!doctype html> <html ng-app> <head> <title>一个绑定多个页面元素的angular程序</title> <script src="../Script/angular.min.js" type="text/javascript"></script> </head> <body> <h3>以列表的方式显示绑定的多项数据</h3> <div ng-controller="stucontroller"> <ul> <li ng-repeat="stu in data"> <span>{{stu.name}}</span> <span>{{stu.sex}}</span> <span>{{stu.age}}</span> <span>{{stu.score}}</span> </li> </ul> <div> <script type="text/javascript"> function stucontroller($scope) { $scope.data = [ { name: "张明明", sex: "女", age: 24, score: 95 }, { name: "李清思", sex: "女", age: 27, score: 87 }, { name: "刘小华", sex: "男", age: 28, score: 86 }, { name: "陈忠忠", sex: "男", age: 23, score: 97 } ]; } </script> </body> </html>（3）页面效果HTML文件1-4.html最终实现的页面效果如图1-5所示。
（4）源码分析在本示例的源代码中，除在
元素中声明的控制器管理类“stucontroller”之外，还在元素中添加了一个名为“ng-repeat”的属性，该属性是Angular的一个新指令，表示复制的意思，即对于“data”数组中的每个元素，都会将元素中的结构复制一次，在每次复制使用时，再将“stu”的属性值赋予复制的中各个元素。因此，“data”数组中的数量与复制后的元素的数量是一致的，并且在每次复制成功之后，都将数组中的各个元素内容通过双花括号的方式插入到元素中，从而实现了在元素中显示全部“data”数组内容的功能。 而当“data”数组中的源数据发生变化后，使用双花括号绑定的数据内容也将会随之发生变化，而这些变化，在Angular中都是自动完成的，无须注册任何监测的事件。 相关资源：AngularJS实战.pdf 中文完整版