(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所示。
图1-3一个计算功能的Angular程序
(4) 源码分析
在本示例的代码中，除了在<html>元素中添加“ng-app”属性，表明整个页面代码都由Angular框架进行管理外，在使用双花括号插入数值时，先通过加号“+”运算符计算出两个数值的结果并返回给页面，然后，在计算数值时使用了一个“|”管道符号，这个符号在Angular中表示调用过滤器格式化数据，它的调用方法为：
{{exp | filtername : para1:...paraN}}
在上述调用方法中，exp表示Angular可以识别的任意表达式，filtername表示过滤器的名称，
Angular内置了很多的过滤器，如currency、date、number、uppercase等，para1表示对过滤器功能的进一步描述，如示例中的“number:0”表示除掉小数据后的数值，保留整数部分。当然，除使用Angular内置的过滤器外，还可以自定义自己的过滤器，具体实现的方式将会在后续的章节中进行详细的介绍。
通过上述两个示例的介绍，相信大家已经被Angular的语法所吸引，更被它“神奇”的数据插入功能所折服，而上述两个示例的都采用以双花括号插入表达式的形式，将数据添加至页面的模板中，如果将表达式的数据与页面中的元素直接进行绑定，又会发生什么样的事情呢？请看下期示例。
网友评论