Angular自身提供了一套完整的模板系統(tǒng)，配合$scope對(duì)象和數(shù)據(jù)雙向綁定機(jī)制厘惦，將頁(yè)面純靜態(tài)元素經(jīng)過行為垂涯、屬性的添加和格式的轉(zhuǎn)換，最終變成在瀏覽器中顯示的動(dòng)態(tài)頁(yè)抵蚊。
在模板系統(tǒng)中施绎，可包含Angular的指令、數(shù)據(jù)綁定贞绳、表單控件和過濾器谷醉，同時(shí)，在處理復(fù)雜程序時(shí)冈闭，可以構(gòu)建多個(gè)模板頁(yè)面作用于視圖層俱尼。在主頁(yè)中，再通過包含(include)的方式加載這些零散的模板頁(yè)萎攒。這樣做的好處在于遇八，一次定義可多處調(diào)用，增加代碼的重復(fù)使用耍休，減少維護(hù)成本刃永。
1. 構(gòu)建模板內(nèi)容
① 直接在頁(yè)面中添加元素和Angular指令，依賴控制器中構(gòu)建的屬性和方式綁定模板中的元素內(nèi)容和事件羹应，實(shí)現(xiàn)應(yīng)用需求揽碘。
② 通過"type"類型為"text/ng-template"的<script>元素來構(gòu)建一個(gè)用于綁定數(shù)據(jù)的模板，在模板內(nèi)部添加數(shù)據(jù)綁定和元素的事件。
③ 通過添加元素的"src"屬性雳刺，導(dǎo)入一個(gè)外部文件作為綁定數(shù)據(jù)的模板劫灶，在導(dǎo)入數(shù)據(jù)模板時(shí)，除添加"src"屬性外掖桦，還需要使用"ng-include"指令本昏。
例1：首先通過<script>元素構(gòu)建了一個(gè)顯示兩項(xiàng)數(shù)據(jù)信息的模板；然后枪汪，在新增的一個(gè)<div>元素中將模板的內(nèi)容導(dǎo)入到元素中涌穆。
<script type="text/ng-template" id="tplbase">
姓名：{{name}}，<br>
郵箱：{{email}}
</script>
<div ng-include src="'tplbase'" ng-controller="fn"></div>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('aa',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.name="zyt";
$scope.email="zouyitingRae@163.com"
}])
// 先添加一個(gè)"type"類型為"text/ng-template"的<script>元素雀久，并在該元素中通過雙花括號(hào)的方式綁定控制器中需要顯示的兩項(xiàng)數(shù)據(jù)宿稀。
// 由于該元素定義的是Angular類型的模板，因此赖捌，它可以直接使用Angular中的表達(dá)式進(jìn)行數(shù)據(jù)綁定祝沸，除此之外，還可以在模板中綁定元素的各類事件
// 在完成模板內(nèi)容構(gòu)建之后越庇，新添加一個(gè)<div>元素罩锐，用來導(dǎo)入模板內(nèi)容。在導(dǎo)入時(shí)卤唉，首先添加"ng-include"指令涩惑，聲明該元素的內(nèi)容來源于其他模板；
// 然后再添加"src"屬性桑驱，指定對(duì)應(yīng)模塊的名稱竭恬，即ID號(hào)或模板文件名稱。需要注意的是:"src"屬性值是一個(gè)表達(dá)式碰纬，它可以是$scope中的屬性名萍聊，
// 也可以是普通字符串问芬。如果是后者悦析，必須添加引號(hào)
</script>
2. 使用指令復(fù)制元素
在構(gòu)建模板內(nèi)容的過程中，有時(shí)需要反復(fù)將不同的數(shù)據(jù)加載到一個(gè)元素中此衅，例如强戴，通過< li>元素綁定一個(gè)數(shù)組的各成員季俩。此時(shí)量蕊，可以使用"ng-repeat"指令，它的功能時(shí)根據(jù)綁定數(shù)組成員的數(shù)量坞淮，復(fù)制頁(yè)面中被綁定的< li>元素墨微，并在復(fù)制過程中添加元素相應(yīng)的屬性和方法道媚，通過這種方式，實(shí)現(xiàn)數(shù)組數(shù)據(jù)與元素綁定的過程。
在使用"ng-repeat"指令復(fù)制元素的過程中最域，還提供了幾個(gè)非常實(shí)用的專有變量谴分，可以通過這些變量來處理顯示數(shù)據(jù)時(shí)的各種狀態(tài)。這些變量的功能分別如下：
--$first镀脂，該變量表示記錄是否是首條牺蹄，如果是則返回true，否則返回false.
--$last薄翅，該變量表示記錄是否是尾條沙兰，如果是則返回true，否則返回false.
--$middle翘魄，該變量表示記錄是否是中間條鼎天，如果是則返回true，否則返回false.
--$last暑竟，該變量表示記錄的索引值训措，其對(duì)應(yīng)的值從0開始.
例2：在頁(yè)面中，通過< li>元素顯示一個(gè)數(shù)組中的全部成員數(shù)據(jù)光羞，并且在顯示數(shù)據(jù)時(shí)列出當(dāng)條數(shù)據(jù)是否是“首條”和“尾條”記錄的狀態(tài)信息绩鸣。
<style>
body{font-size: 12px;}
ul{list-style: none;width: 400px;margin: 0;padding: 0;}
li{float: left;padding: 5px 0;}
span{width: 50px;float: left; padding: 0 10px;}
</style>
<div ng-controller="fn">
<ul>
<li>
<span>序號(hào)</span>
<span>姓名</span>
<span>性別</span>
<span>是否首條</span>
<span>是否尾條</span>
</li>
<li ng-repeat="stu in data">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{$first?'是':'否'}}</span>
<span>{{$last?'是':'否'}}</span>
</li>
</ul>
</div>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('aa',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.data=[
{name:'趙四',sex:'女'},
{name:'張三',sex:'男'},
{name:'王二',sex:'男'},
]
}]);
</script>
3. 添加元素樣式
① 直接綁定值為CSS類別名稱的$scope對(duì)象屬性
例：$scope.red="red";
<div class="{{red}}"></div> === <div ng-class="{{red}}"
② 以字符串?dāng)?shù)組方式選擇性添加CSS類別名稱
例：$scope.blnfocus=true;
<div ng-class="{true:'red',false:'blue'}[blnfocus]"></div>
<div>的CSS樣式取決與"blnfocus"屬性值，當(dāng)該值為true時(shí)纱兑，添加“red”樣式名呀闻，當(dāng)該值為false時(shí)，添加“blue”樣式名潜慎。這種方式只能在兩種樣式中選擇一種捡多，并且{}和[]順序不可顛倒。在{}中設(shè)置可選擇的兩種樣式名稱铐炫，在[]中設(shè)置控制樣式的的屬性名垒手。
③ 通過定義key/value對(duì)象的方式來添加多個(gè)CSS類別名稱
例：$scope.a=false;
$scope.b=true;
<div ng-class="{'red':a,'blue':b}"></div>
此外，在Angular中倒信，還有另外兩個(gè)用于添加樣式的頁(yè)面指令科贬，分別為"ng-class-odd"和"ng-class-even"專用于以列表方式顯示數(shù)據(jù)，對(duì)應(yīng)奇數(shù)行和偶數(shù)行的樣式鳖悠。
例3：在例2的基礎(chǔ)上榜掌，在樣式方面增加三個(gè)功能，首先乘综，將第一個(gè)< li>元素中顯示的字體加粗憎账；其次，添加"ng-class-odd"和"ng-class-even"兩個(gè)指令卡辰，實(shí)現(xiàn)列表的隔行變色功能胞皱；最后邪意，當(dāng)單擊某行< li>的元素時(shí)，顯示相應(yīng)的背景色反砌。
<style>
body{font-size: 12px;}
ul{list-style: none;width: 408px;margin: 0;padding: 0;}
li{float: left;padding: 5px 0;}
ul .odd{color: #0026ff;}
ul .even{color: #f00;}
ul .focus{color: #ccc;}
ul .bold{font-weight: bold;}
span{width: 52px;float: left; padding: 0 10px;}
</style>
<div ng-controller="fn">
<ul>
<li ng-class="{{bold}}">
<span>序號(hào)</span>
<span>姓名</span>
<span>是否首條</span>
<span>是否尾條</span>
</li>
<li ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="stu in data" ng-click="li_click($index)" ng-class="{focus:$index==focus}">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{$first?'是':'否'}}</span>
<span>{{$last?'是':'否'}}</span>
</li>
</ul>
</div>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('aa',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.bold='bold';
$scope.li_click= function (i) {
$scope.focus=i;
}
$scope.data=[
{name:趙四',sex:'女'},
{name:'張三',sex:'男'},
{name:'王二',sex:'男'},
]
}]);
</script>
4.控制元素的顯示與隱藏狀態(tài)
在Angular中抄罕，可以通過“ng-show”“ng-hide”“ng-switch”指令來控制元素的隱藏與顯示的狀態(tài)。前兩個(gè)指令直接控制元素的顯示與隱藏狀態(tài)于颖。當(dāng)“ng-show”值為true或“ng-hide”值為false時(shí)呆贿，元素顯示，反之森渐，元素隱藏做入。
后一個(gè)“ng-switch”指令的功能是顯示匹配成功的元素，該指令需要結(jié)合"ng-switch-when"和"ng-switch-default"指令使用同衣。在"ng-switch"指令中竟块，當(dāng)指定的“on”值與某個(gè)或多個(gè)添加"ng-switch-when"指令的元素匹配時(shí)，這些元素顯示耐齐，其他未匹配的元素則隱藏浪秘。如果沒有找到與“on”值相匹配的元素時(shí)，則顯示添加了"ng-switch-default"指令的元素埠况。
例4：
<div ng-controller="fn">
<div ng-show={{isShow}}>zyt</div>
<div ng-hide={{isHide}}>zouyitingrae@163.com</div>
<ul ng-switch on={{switch}}>
<li ng-switch-when="1">zyt</li>
<li ng-switch-when="2">zouyitingrae@163.com</li>
<li ng-switch-default>更多...</li>
</ul>
</div>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('aa',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.isShow = true;
$scope.isHide = false;
$scope.switch = 3;
}]);
</script>
