[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