6.使用AngularJS模板来创建视图
AngularJS模板包含定义了额外的功能，对DOM元素行为的表达式，过滤器和指令。
1.了解模板
表达式：类似js的代码段。在作用域的上下文被求值。可以放置在普通的HTML文本或属性值中
<p>{{1+2}}</p>
<a href="/myPage.html/{{hash}}"></a>
过滤器：过滤器变换被放置在网页上的数据的外观。（如可以把作用域中的数值转换为货币字符或者时间字符串）
指令：新HTML元素名称或HTML元素中的属性的名称。添加和修改HTML元素的行为来为AngularJS应用程序提供数据绑定，事件处理etc.
<div>
<input ng-model="msg">
{{msg | uppercase}}
</div>
（ng-model="msg"属性是一个指令，<input>元素的值与作用域中的msg绑定。{{}}应用大写过滤器表达式）
1.2.使用表达式
表达式是绑定到数据模型的（类似JavaScript表达式）
1）可以在表达式里使用作用域定义的属性名称和函数。
2）表达式被定义到作用域内，作用域中的数据变化时，表达式的值也会变化
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS expressions</title>
<style type="text/css">
p{width: 400px;height: 40px;line-height: 40px;background-color: red;color: #fff;text-align: center;cursor: pointer;}
</style>
</head>
<body>
<div ng-controller="myController">
<h1>Expressions</h1>
{{'Bilbo'+'Baggins'}}<br/>
{{first}} {{last}}<br/>
{{combine(first,last)}}<br/>
<p ng-click="setName(newFirst,newLast)">
Click to change to {{newFirst}} {{newLast}}
</p>
<p ng-click="setName('Bilbo','Baggins')">
Click to change to Bilbo Baggins
</p>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="angular_expressions.js"></script>
</div>
</body>
</html>
使用表达式以各种方式从作用域获得数据的AngularJS模板
var myModule=angular.module('myApp', []);
myModule.controller('myController', function($scope){
$scope.first='Thorin';
$scope.last="Oakenshield";
$scope.newFirst="Gandalf";
$scope.newLast="Greyhame";
$scope.combine=function(fName,lName){
return fName+' '+lName;
}
$scope.setName=function(fName,lName){
$scope.first=fName;
$scope.last=lName;
}
})
1.3.使用过滤器
过滤器是一种提供器
表达式内实现过滤器：{ {expression | filter }} {{ expression | filter | filter }}
依赖注入添加过滤器：
controller('myController',['$scope','currencyFilter',function($scope,currencyFilter){
$scope.getCurrencyValue=function(value){
return currencyFilter(value,"$USD")
}
}])
可供AngularJS过滤器使用的作用域
var myModule=angular.module('myApp', []);
myModule.controller('myController', function($scope){
$scope.JSONObj={title:"myTitle"};
$scope.word="Supercalifreesdassfsaca";
$scope.days=['Monday','Tuesday','Wednesday','Thursday','Friday'];
});
实现不同类型的过滤器修改呈现在视图中显示的数据的AngularJS模板
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Filters</title>
</head>
<body>
<div ng-controller="myController">
<h2>Basic Filters</h2>
Number:{{123.4567|number:3}}<br/>
Currency:{{123.45678|currency:"$"}}<br/>
Date:{{1239321123112|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}}
</div>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="angular_filters.js"></script>
</body>
</html>
一个AngularJS模板，实现filter和orderBy过滤器来对表视图的条目进行排序和过滤
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Sorting and Filtering</title>
<style type="text/css">
table{max-width: 640px;min-width: 300px;text-align: center;}
td,th{padding:3px;}
</style>
</head>
<body>
<div ng-controller="myController">
<h2>Sorting and Filtering</h2>
<input type="text" placeholder="input sorting" 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>
</div>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="angular_filter_sort.js"></script>
</body>
</html>
建立了AngularJS可以使用的作用域，然后排序和过滤
var myModel=angular.module('myApp', []);
myModel.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;//true表示升序
$scope.column='make';
$scope.setSort=function(column){
$scope.column=column;
$scope.reverse=!$scope.reverse;
};
$scope.filterString='';
$scope.setFilter=function(value){
// filterFilter提供器限制filteredCameras的条目是那些松散匹配filterString的条目
$scope.filteredCameras=filterFilter($scope.cameras,$scope.filterString);
}
}])
1.4.创建自定义过滤器
filter()方法创建过滤器提供器，并把它注册到依赖注入的服务器
filter('myFilter',function(){
return function(input,param1,param2){
return <<modified input>>
}
})
在AngularJS中实现自定义过滤器提供器
var myModule=angular.module('myApp', []);
myModule.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;
}
});
// 依赖注入添加censorFilter提供器
myModule.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=censorFilter($scope.txt,"<<censord>>");
}
}])
使用自定义过滤器的AngularJS模板
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Custom Filter</title>
</head>
<body>
<div ng-controller="myController">
<h2>Sorting and Filter</h2>
<p>This is a bad phrase</p>
{{phrase | censor:"***"}}<br/>
<p>This is some bad,dark evil text</p>
{{"This is some bad,dark evil text" | censor:"happy"}}<br/>
<p ng-click="filterText()">{{txt}}</p>
</div>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="angular_filter_customer.js"></script>
</body>
</html>
