《学习笔记》使用AngularJS模板来创建视图

AngularJS模板提供了一个框架来给用户程呈现应用程序视图。AngularJS模板包含定义了额外的功能和对DOM元素的行为的表达式，过滤器和指令。模板建立在普通的HTML之上，并通过添加额外的元素和属性来轻松地扩展HTML的功能。

下面将介绍AngularJS模板以及表达式和过滤器。表达式可以让你在模板汇总实现与HTML代码并排的类似JavaScript的代码。过滤器允许你在显示数据值前修改它们，例如，设置文本格式。

1，了解模板

AngularJS模板虽然相当简单，但非常强大且易于扩展。模板基于标准的HTML文件，但用3个附加组件扩展了HTML功能。

表达式：表达式是类似JavaScript的代码段，它在作用域的上下文内被求值。表达式由{{}}括号表示。表达式的结果被添加到一个已编译的HTML网页内。表达式可以防止在普通的HTML文本或属性的值中，如:<p>{{1+2}}</p>
过滤器：过滤器变换被放在网页上的数据的外观。例如，一个过滤器可以把作用域中的数值转换为货币字符或时间字符串
指令：指令是新的HTML元素的名称或HTML元素中的属性的名称。它们添加和修改HTML元素的行为AngularJS应用程序提供数据绑定，事件处理，以及其他支持。

下面的代码片段显示了实现指令，表达式和过滤器的一个例子。ng-model="msg"属性是一个指令，它吧<input>元素的值与作用域中的msg绑定。在{{}}括号中的代码是一个应用大写过滤器的表达式

<div><input ng-model="msg">{{msg|uppercase}}
</div>

当你把一个AngularJS网页载入到浏览器时，你在加载它的原始状态，包含模板代码与HTML代码。初始DOM是从那个网页中构建的。当AngularJS应用程序启动时，AngularJS模板编译到DOM中，动态地把值，事件绑定和DOM元素的其他属性调整到模板中的指令，表达式和过滤器中。

在编译期间，HTML标签和属性被规范化，以支持一个实际情况，即AngularJS是区分大小写的，而HTML是不区分大小写的。规范化做了两件事情:

从元素和属性的前面剥离x-和data-前缀。
把带有":","-"或"_"的名称转换成驼峰形式。

例如，以下所有名称都规范化为ngModel：ng-model,data-ng-model,x-ng:model,ng_model

2，使用表达式

使用表达式是在AngularJS视图中表示来自作用域数据的最简单方法。表达式的代码块被封装在括号中：{{expression}}。AngularJS编译器把表达式编译为HTML元素，使表达式的结果显示出来。例如，查看下面的表达式:

{{1+5}}
{{'one'+'two'}}

表达式是绑定到数据模型的，它提供了两个巨大的好处。首先，你可以在表达式里使用作用域中定义的属性名称和函数。第二，因为表达式被绑定到作用域内，当作用域中的数据变化时，表达式的值也会变化。

AngularJS表达式在几个方面类似于JavaScript表达式，但它们在下面这些方面是不同的。

属性求值：属性名对作用域模型，而不是针对全局JavaScript的命名空间进行求值
更宽容：表达式遇到未定义或空变量类型时不抛出异常，相反，它们把这些当做没有值
无流控制：表达式不允许JavaScript的条件语句或循环。此外，你不能在表达式中抛出一个错误。

AngularJS把用于定义指令的值的字符串作为表达式来求值。这使你可以在一个定义中包括表达式类型语法。例如，当你在模板中设置ng-click指令的值时，你可以指定一个表达式。在那个表达式内部，你可以引用作用域的变量，并使用其他表达式语法，如下所示：

<span ng-click="scopeFunction()"></span>
<span ng-click="scopeFunction(scopeVariable,'stringParameter')"></span>

由于AngularJS模板表达式可以访问作用域，因此你也可以在AngularJS表达式中对作用域进行更改。例如，下面的ng-click指令改变这个作用域模型内的msg值：

<span ng-click="msg='clicked'"></span>

下面的代码清单显示了在连接到作用域的AngularJS模板中实现表达式的各种方法。

angular-expressions.js：建立一个可供AngularJS表达式使用的作用域

angular.module('myApp',[]).controller('myController',function($scope){$scope.first = 'xiao';$scope.last = 'baicai';$scope.newFirst = 'da';$scope.newLast = 'huilang';$scope.combine = function(fName,lName){return fName + ' '+lName;};$scope.setName = function(fName,lName){$scope.first = fName;$scope.last = lName;};});

angular_expressions.html:使用表达式以各种方式从作用域模型获得数据的AngualrJS模板

<!doctype html>
<html ng-app="myApp">
<head></head>
<body><div ng-controller = "myController"><h1>Expression</h1>{{'Xiao'+'BaiCai'}}<br>{{first}}{{last}}<br>{{combine('Xiao','BaiCai')}}<br>{{combine(first,last)}}<br><p ng-click="setName(newFirst,newLast)">Click to change to {{newFirst}}{{newLast}}</p><p ng-click="setName('Xiao','BaiCai')">Click to change to XiaoBaiCai</p><script src="js/angular.js"></script><script src="js/angular_expressions.js"></script>
</body>
</html>

3，使用过滤器

AngularJS的一个很棒的特点是实现过滤器的能力。过滤器是一种提供器，它挂接到表达式解析器中并修改表达式的结果(例如格式化时间或货币值)以在视图中显示。

你可以使用以下语法在表达式内实现过滤器:

如过你把多个过滤器链接在一起，它们将按你指定的顺序执行:

有些过滤器允许你以函数参数的形式提供输入。你可以利用下面的语法添加这些参数:

你也可以使用依赖注入添加过滤器，这些是控制器和服务的提供器。过滤器提供器的名称是过滤器的名称加Filter。例如下面代码清单中的过滤器：

controller('myController',['$scope','currencyFilter',function($scope,currencyFilter){$scope.getCurrencyValue = function(value){return currencyFilter(value,"$USD");};}]);

3.1，使用内置过滤器

AngularJS提供了几种不同类型的过滤器，使你可以轻松地在AngularJS模板中格式化字符串，对象，数值。下表列出了AngularJS提供的内置过滤器。

在AngularJS模板中修改表达式的过滤器
过滤器	说明
currency[:symbol]	根据所提供的symbol值把数字格式设置为货币。如{{123.46\|currency:"$usd"}}
filter:exp:compare
json	把一个JavaScript对象格式化成JSON字符串。例如:{{{'name':'Brad'}\|json}}
limitTo:limit	由limit量限制在表达式中所表示的数据。如果表达式是一个String，那么它由字符数限制。如果该表达式的结果是array，则由其元素的数量限制。
lowercase	输出把表达式转化为小写的结果
uppercase
number[:fraction]	把数值格式化为文本。如果指定了fraction参数，那么由该大小限制所显示的小数的位数.
orderBy:exp:reverse
date[:format]
date[:format]

下面的代码清单显示了如何在AngularJS中实现一些基本的过滤器。

angular_filters.js：建立一个可供AngularJS过滤器使用的作用域

angular.module('myApp',[]).controller('myController',function($scope){$scope.JSONObj = {title:"myTitle"};$scope.word="Supercalifragilisticexpialidocious";$scope.days=['Monday','Tuesday','Wednesday','Thursday','Friday'];});

angular_filters.html：实现不同类型的过滤器来修改在呈现的视图中显示的数据的AngularJS模板

<!doctype html>
<html ng-app="myApp">
<head></head>
<body><div ng-controller="myController"><h2>Basic Filters</h2>Number:{{123.456|number:3}}<br>Currency:{{123.45678|currency:"$"}}<br>Date:{{1886185509800|date:'yyyy-MM-dd HH:mm:ss Z'}}<br>JSON:{{JSONObj|json}}<br>Limit Array:{{days|limitTo:3}}<br>limit String:{{word|limitTo:10}}<br>uppercase:{{word|uppercase|limitTo:10}}<br>Lowercase:{{word|lowercase|limitTo:10}}
<script src="js/angular.js"></script>
<script src="js/angular_filters.js"></script>
</body>
</html>

结果如下：

3.2，使用过滤器来实现排序和过滤

过滤器的一个非常常见的用途是，对从JavaScript数组利用ng-repeat指令建立的动态元素进行排序或过滤。本节提供了一个例子，它实现了orderBy过滤器，以产生可以按照列进行排序，并用从<input>元素得到的字符串进行过滤的表格。

下面的代码清单实现了一个控制器，它定义了$scope.cameras数组用作作用域的输入数据。

angular_filter_sort.js：建立了AngularJS可以使用的作用域，然后排序和过滤

angular.module('myApp',[]).controller('myController',['$scope','filterFilter',function($scope,filterFilter){$scope.cameras = [{make:'Canon',model:'70D',mp:20.2},{make:'Canon',model:'6D',mp:20},{make:'Nikon',model:'D7100',mp:24.1},{make:'Nikon',model:'D5200',mp:24.1}];$scope.filteredCameras = $scope.cameras;$scope.reverse = true;$scope.column = 'make';$scope.setSort = function(column){$scope.column = column;$scope.reverse = !$scope.reverse;};$scope.filterString = '';$scope.setFilter = function(value){$scope.filteredCameras = filterFilter($scope.cameras,$scope.filterString);};}]);

angular_filter_sort.html：一个AngularJS模板，实现filter和orderBy过滤器来对表视图的条目进行排序和过滤

<!doctype html>
<html ng-app="myApp">
<head>
<style>table{text-align:center;}td,th{padding:3px;}</style>
</head>
<body><div ng-controller="myController"><h2>Sorting and Filtering</h2><input type="text" ng-model="filterString"><input type="button" ng-click="setFilter()" value="Filter"><table><tr><th ng-click="setSort('make')">make</th><th ng-click="setSort('model')">Model</th><th ng-click="setSort('mp')">MegaPixel</th></tr><tr ng-repeat = "camera in filteredCameras|orderBy:column:reverse"><td>{{camera.make}}</td><td>{{camera.model}}</td><td>{{camera.mp}}</td></tr></table>
<script src="js/angular.js"></script>
<script src="js/angular_filter_sort.js"></script>
</body>
</html>

4，创建自定义过滤器

AngularJS允许你创建自己的自定义过滤器提供器，然后在表达式，控制器和服务中使用它，就像内置的过滤器那样。AngularJS提供了filter()方法来创建一个过滤器提供器，并把它注册到依赖注入的服务器。

filter()方法接受过滤器的名称作为第一个参数并以一个函数作为第二个参数。该过滤器函数应该接受表达式输入作为第一个参数和后面的任何其他参数。例如：

filter('myFilter',function(){return function(input,param1,param2){return <<modified input>>;};});

在过滤器函数里面，你可以用任意方式改变输入的值。被过滤器函数返回的任何值都被作为表达式的结果返回。

如下所示的代码清单创建自定义过滤器函数，它从一个字符串审查单词，并允许提供替换值作为一个可选参数。

angular_filter_customer.js：在AngularJS中实现自定义过滤器提供器

angular.module('myApp',[]).filter('censor',function(){return function(input,replacement){var cWords = ['bad','evil','dark'];var out = input;for(var i =0;i<cWords.length;i++){out = out.replace(cWords[i],replacement);}return out;};}).controller('myController',['$scope','censorFilter',function($scope,censorFilter){$scope.phrase = "This is a bad phrase.";$scope.txt = "Click to filter out dark and evil.";$scope.filterText = function(){$scope.txt = censorilter($scope.txt,'<<censored>>');};}]);

angular-filter_custom.html：使用自定义过滤器的AngularJS模板

<!doctype html>
<html ng-app="myApp">
<head>
<style>table{text-align:center;}td,th{padding:3px;}</style>
</head>
<body><div ng-controller="myController"><h2>Sorting and Filtering</h2>{{phrase|censor:"***"}}<br>{{"This is some bad,dark evil text."|censor:"happy"}}<p ng-click="filterText()">{{txt}}</p>
<script src="js/angular.js"></script>
<script src="js/angular_filter_customer.js"></script>
</body>
</html>

结果：

5，小结

AngularJS模板易于实现，但却非常强大和全面。本篇文章讲了AngularJS模板的组件，以及它们如何协同工作来扩展HTML DOM的行为和功能。