AngularJS入门教程之AngularJS 模板(2)

在一个单独的终端上,进入到angular-phonecat目录并且运行./scripts/test-server.sh来启动测试(Windows命令行下请输入.\scripts\test-server.bat来运行脚本,后面脚本命令运行方式类似);

打开一个新的浏览器窗口,并且转到: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>

确定把toBe(3)改成toBe(4)之后单元测试失败,然后重新跑一遍./scripts/test.sh脚本

总结

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfpfz.html