[TOC]
# Angular的模板
## 模板簡介
Angular中的模板Angular自身提供了一整套完整的模板系統，配合$scope對象和數據雙向綁定機制，將頁面純靜態元素經過行為、屬性的添加和格式的轉換，最終變成在瀏覽器中顯示的動態頁。在模板系統中，可以包含Angular的指令、數據綁定、表單控件和過濾器，同時，在處理復雜程序時，可以構建多個模板頁面作用于視圖層。在主頁中，再通過包含（include）的方式加載這些零散的模板頁。這樣做的好處在于，一次定義可多處調用，增加代碼的重復使用，減少維護成本。
## 構建模板
構建模板的內容是使用模板功能的前提，一般通過下列幾種方式來實現。
* 在一個html文件中構建模板。
* 通過“type”類型為“text/ng-template”的<script>元素來構建一個模板
## 模板構建和引用
### 直接在頁面中添加元素和Angular指令【ng-include當屬性使用】
#### app.js
~~~js
angular.module('myapp',[]);
~~~
#### index.html
~~~html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!--頭部-->
<!--使用ng-include指令，并且充當屬性-->
<!--切記這里該死的單引號,文件名稱是用字符串描述的-->
<div ng-include="'head.html'"></div>
<!--內容-->
<div>index</div>
<!--腳注-->
<!--使用ng-include指令，并且充當屬性-->
<!--切記這里該死的單引號,文件名稱是用字符串描述的-->
<div ng-include="'footer.html'"></div>
</body>
</html>
~~~
#### head.html
~~~html
<div>這里是頭部</div>
~~~
#### footer.htm
~~~html
<div>這里是腳注</div>
~~~
### 直接在頁面中添加元素和Angular指令【ng-include當標簽使用】
#### app.js
~~~js
angular.module('myapp',[]);
~~~
#### index.html
~~~html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!--當標簽使用-->
<ng-include src="'head.html'"></ng-include>
<!--內容-->
<div>index</div>
<!--當標簽使用-->
<ng-include src="'footer.html'"></ng-include>
</body>
</html>
~~~
#### head.html
~~~html
<div>這里是頭部</div>
~~~
#### footer.htm
~~~html
<div>這里是腳注</div>
~~~
### 直接在頁面中添加元素和Angular指令【ng-include當樣式使用】
#### app.js
~~~js
angular.module('myapp',[]);
~~~
#### index.html
~~~html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!--當樣式使用-->
<div class="ng-include: 'head.html'"></div>
<!--內容-->
<div>index</div>
<!--當樣式使用-->
<div class="ng-include: 'footer.html'"></div>
</body>
</html>
~~~
#### head.html
~~~html
<div>這里是頭部</div>
~~~
#### footer.htm
~~~html
<div>這里是腳注</div>
~~~
###通過“type”類型為“text/ng-template”的<script>元素來構建模板
#### app.js
~~~js
angular.module('myapp',[]);
~~~
#### index.html
~~~html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!--構建模板-->
<script id="head" type="text/ng-template">
<div>這里是頭部</div>
</script>
<!--構建模板-->
<script id="footer" type="text/ng-template">
<div>這里是腳注</div>
</script>
<!--ng-include加載模板-->
<ng-include src="'head'"></ng-include>
<!--內容-->
<div>index</div>
<!--ng-include加載模板-->
<ng-include src="'footer'"></ng-include>
</body>
</html>
~~~
## 模板實戰
#### 項目結構
#### index.css
~~~css
table {
width: 600px;
border-collapse: collapse;
border: 1px solid black;
}
thead td {
border: 1px solid black;
background: black;
color: white;
}
tbody td, tfoot td {
border: 1px solid black;
background: white;
color: black;
}
~~~
#### app.js
~~~js
//創建模塊
angular.module('myapp',[]);
~~~
#### index.js
~~~js
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
// 數據（一堆數據）
$scope.data = [
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
},
{
name: 'hzj',
sex: '男',
age: 18,
score: 100
}
];
// 模板切換屬性
$scope.tpl = 'list.html';
//list顯示
$scope.b1Click = function () {
$scope.tpl = 'list.html';
};
//表格顯示
$scope.b2Click = function () {
$scope.tpl = 'table.html';
};
}]);
~~~
#### list.html
~~~html
<!--ul模板-->
<!--這里不要加一些頭之類的HTML標簽-->
<ul>
<li ng-repeat="item in data">
{{item.name}}
{{item.sex}}
{{item.age}}
{{item.score}}
</li>
</ul>
~~~
#### table.html
~~~html
<!--表格模板-->
<!--這里不要加一些頭之類的HTML標簽-->
<table>
<thead>
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>分數</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.score}}</td>
</tr>
</tbody>
<tfoot>
<tr >
<td colspan="4">總人數為:{{data.length}}</td>
</tr>
</tfoot>
</table>
~~~
#### index.html
~~~html
<!DOCTYPE html>
<!--加載模塊-->
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加載樣式-->
<link rel="stylesheet" href="css/index.css">
<!--加載Angular類庫-->
<script src="bower_components/angular/angular.min.js"></script>
<!--加載模塊創建文件-->
<script src="js/app.js"></script>
<!--加載控制器創建文件-->
<script src="js/index.js"></script>
</head>
<body>
<!--加載控制器-->
<div ng-controller="my_c">
<!--綁定按鈕1-->
<button ng-click="b1Click()">列表</button>
<!--綁定按鈕2-->
<button ng-click="b2Click()">表格</button>
<hr>
<!--利用模板改變View-->
<ng-include src="tpl"></ng-include>
</div>
</body>
</html>
~~~
#### 啟動效果
#### 點擊表格按鈕效果
- Angular簡介
- angular1資料網站
- Angular初級部分
- 打破傳統的前端
- Angular基本組成部分
- Angular環境搭建
- Angular項目測試
- Angular基礎概念
- Angular模塊
- Angular控制器
- Angular指令
- Angular表達式
- Angular視圖
- Angular基礎實戰
- Angular模塊創建和使用
- Angular控制器和模型創建
- scope對象
- 控制器中調度window對象和document對象
- Angular表達式調度過濾器
- Angular中的ng模塊全局方法
- Angular模板應用
- 使用指令復制元素
- 使用指令隱藏顯示元素
- Angular指令ng-if
- ng-src和ng-href
- Angular處理樣式
- Angular作用域事件傳遞
- 表單中的元素
- Angular初學者常見的坑
- 再論雙向綁定
- Angular中級部分
- Angular路由機制
- ui-router管理狀態
- ui-router狀態嵌套和視圖嵌套
- ui-router多個命名的視圖
- ui-router路由控制
- 自定義指令
- 自定義過濾器
- Angular項目目錄結構
- Angular服務
- Angular高級部分
- Angular依賴注入
- README