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>