AngularJS入门教程02：AngularJS 模板(2)

时间：2016-07-28 15:24 来源：AngularJS入门教程作者：AngularJS 阅读：次

在写测试的时候，AngularJS的开发者倾向于使用Jasmine行为驱动开发（BBD）框架中的语法。尽管AngularJS没有强迫你使用Jasmine，但是我们在教程里面所有的测试都使用Jasmine编写。你可以在Jasmine的官方主页或者Jasmine Wiki上获得相关知识。

基于AngularJS的项目被预先配置为使用JsTestDriver来运行单元测试。你可以像下面这样运行测试：

在一个单独的终端上，进入到angular-phonecat目录并且运行./scripts/test-server.sh来启动测试（Windows命令行下请输入.\scripts\test-server.bat来运行脚本，后面脚本命令运行方式类似）；
打开一个新的浏览器窗口，并且转到http://localhost:9876 ；
选择“Capture this browser in strict mode”。

这个时候，你可以抛开你的窗口不管然后把这事忘了。JsTestDriver会自己把测试跑完并且把结果输出在你的终端里。
运行./scripts/test.sh进行测试。

你应当看到类似于如下的结果：
```
Chrome: Runner reset.
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
  Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
```
耶！测试通过了！或者没有... 注意：如果在你运行测试之后发生了错误，关闭浏览器然后回到终端关了脚本，然后在重新来一边上面的步骤。

练习

为index.html添加另一个数据绑定。例如：
```
<p>Total number of phones: {{phones.length}}</p>
```
创建一个新的数据模型属性，并且把它绑定到模板上。例如：
```
$scope.hello = "Hello, World!"
```
更新你的浏览器，确保显示出来“Hello, World!”

用一个迭代器创建一个简单的表：

<table>
    <tr><th>row number</th></tr>
    <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
</table>

现在让数据模型表达式的i增加1：

<table>
    <tr><th>row number</th></tr>
    <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
</table>

你现在拥有一个模型，视图，控制器分离的动态应用了，并且你随时进行了测试。现在，你可以进入到步骤3来为应用加入全文检索功能了。