angular模板简介
更新日期:
模板是老生常谈的话题了，在anjular里面，模板被赋予了更多的东西。
angular的templete支持这些东西：
- Directive：这个前面已经提到了，就是ng-click这些angular独有的标记。
- markup：这个就跟传统的模板差不多，使用{{}}来渲染数据，或者执行些简单的expressions（表达式）。
- filter：这个前面也已经讲过了，过滤器，实现数据的过滤定制功能呢。
- form controls：这个是angular用来验证表单的扩展。
filter，directive在另外博文里已经讲过了，这边就不再重复了。
markup
这货大家肯定很熟悉，不然肯定要面壁去。传统型的模板标记一般支持
- 简单变量输出，表达式解析
- 循环
- if 判断等等
不过刚开始接触angular的人会很迷惑，因为什么 循环，if判断，angular的markup一概不支持。angular里面的{{}}只提供表达式解析的功能。而一些逻辑性的东西都推荐使用Directive来实现。
下面我们就看看 这些基本的东西，在angular下怎么实现。
1.循环输出
使用ng-repeat实现，ng-repeat可以将当前的dom节点进行循环输出，eg:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!doctype html> <html > <head> <meta charset="utf-8"> <script src="angular.js"></script> <script type="text/javascript"> function TodoCtrl($scope) { $scope.items = ['hello', 'world']; } </script> </head> <body > <div ng-app> <ul ng-controller="TodoCtrl"> <li ng-repeat="item in items"> </li> </ul> </div> </body> </html> |
结果为（去除了很多无关的angular自动生成的东西后）：
1 2 3 4 5 6 7 8 | <ul ng-controller="TodoCtrl" class="ng-scope"> <li ng-repeat="item in items" > hello </li> <li ng-repeat="item in items"> world </li> </ul> |
这样 就可以循环输出了，这样看起来会比较清爽一些，少了很多烦人的{{}}，让{{}}只处理变量的输出解析。
当然啦，一些必须的扩展是必不可少的，ng-repeat支持下面的这些内部标记：
| 值 | 类型 | 描述 |
|---|---|---|
| $index | number | 当前的集合下标index(0..length-1) |
| $first | boolean | 如果是第一个元素的话，这个变量会为true |
| $middle | boolean | 如果是中间的元素，这个变量会为true |
| $last | boolean | 如果是最后的元素，这个变量会为true |
| $even | boolean | 如果元素$index是偶数，这个变量会为true |
| $odd | boolean | 如果元素$index是奇数，这个变量会为true |
需要注意的是，ng-repeat只支持将所在的dom节点进行循环输出。如果希望，改变这个范围，可以使用ng-repeat-start和ng-repeat-end。
2.条件判断
条件判断，在angular里面使用ng-show来实现。
我们修改下上面的例子
1 2 3 | <li ng-repeat="item in items" ng-show="$first"> </li> |
注意到 后面的ng-show="$first",ng-show=”$first”的机制是这样的。当$first的值为非true的值时就会给当前的dom节点增加一个class => ng-hide 并且这个class被angular设成了.ng-hide {display: none !important;},也就是说只有$first为true类型的值时，这个dom才会显示出来。
这边由于在ng-repeat的环境范围(scope)下，所以可以读到$first的值。这样就只会显示第一个元素。简单易懂吧
form controls
form controls算是angular给表单专门做的扩展。毕竟大部分的应用都是涉及到表单操作的。有这样的扩展后，可以方便很多。
使用起来并不复杂，可以看这个例子，猛戳这里
1 2 3 4 5 6 7 8 9 10 11 | <div ng-app="App"> <form name="myForm" ng-controller="Ctrl"> userType: <input name="input" ng-model="userType" required> <span class="error" ng-show="myForm.input.$error.required">Required!</span><br> <tt>userType = {{userType}}</tt><br> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br> <tt>myForm.$valid = {{myForm.$valid}}</tt><br> <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br> </form> </div> |
这是官方的例子，看起来一目了然。
我们来分析下
1 | <form name="myForm" ng-controller="Ctrl">
|
注意这边的name="myForm",通过定义这个后，angular就自动生成了form的实例，这样，在这个form的范围内你可以访问很多变量。angular尽量使用原生的东西。不仅是form标签，input标签你只要设置了name属性，就可以实例化对象。
所以这边才可以通过myForm.input来拿到文本输入框的实例。
这段代码是这么运行的，我们在input里面设置了required，所以当当前的input为空时，angular会自动设置一些值。
myForm.input.$valid会设为false，表明当前的输入不合法
myForm.input.$error会记录当前的错误，这边因为为空。所以myForm.input.$error.required就会为true
我们这边只定义了required，所以它的值为
{"required":false},如果我们多加一些验证规则如maxlength等等，就会有其他的值。
另外只要form下面有一个标签的值不合法，那么myForm.$valid。form的$valid值就会为false。
我们如何控制样式呢？
angular，会自动根据当前验证的结果给你的dom注入class。
具体会有这些：
- ng-valid 当前节点合法时为true
- ng-invalid 当前节点不合法时为true
- ng-pristine 当前节点还没有被操作，一个input，你没输入过，就会加上这个class
- ng-dirty 与上面的相反，代表当前的input已经被操作过了，有过交互了被污染了
注意当你输入了东西，就会代表污染了，就会有ng-dirty的class了，而你再去掉输入的东西ng-dirty还是会在的。它是第一次的时候，才会判断。
通过这些class，我们就可以操作form的样式了。
有哪些标记可以用呢？
这边主要用input举例，介绍最通用的。具体的应该去官网看api文档。
在input上面我们可以使用很多标记，表明验证规则，主要有下面这些：
| 标记 | 类别 | 描述 |
|---|---|---|
| required | (optional)string | 如果没有输入值的话，就会报错 |
| ngMinlength | (optional)number | 设置最小的宽度值，超过就报错 |
| ngMaxlength | (optional)number | 设置最大的宽度值，超过就报错 |
| ngPattern | (optional)string | 设置正则验证，如果正则匹配不到就会判断为错 |
| ngChange | (optional)string | angular的表达式，当输入的值变化的时候会执行 |
需要注意的是这只是通用的一些，对于一些如 type=’email’这样的angular会自动加上email的合法性判断。
结语
至此，angular的模板就介绍的差不多了。下次开始介绍service的操作，里面的路由service与这边的模板是息息相关的。