源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AngularJS入门教程(二):AngularJS模板

  • 时间:2020-10-31 16:57 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AngularJS入门教程(二):AngularJS模板
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试。 一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。 请重置工作目录:
[url=http://docs.angularjs.org/api/ng.%24rootScope.Scope]AngularJS作用域文档[/url]。 [b]测试[/b] “AngularJS方式”让开发时代码测试变得十分简单。让我们来瞅一眼下面这个为控制器新添加的单元测试: test/unit/controllersSpec.js:
[url=http://pivotal.github.com/jasmine/]官方主页[/url]或者[url=https://github.com/pivotal/jasmine/wiki]Jasmine Wiki[/url]上获得相关知识。 基于AngularJS的项目被预先配置为使用[url=http://code.google.com/p/js-test-driver/]JsTestDriver[/url]来运行单元测试。 你可以像下面这样运行测试: 1.在一个单独的终端上,进入到angular-phonecat目录并且运行./scripts/test-server.sh来启动测试(Windows命令行下请输入.\scripts\test-server.bat来运行脚本,后面脚本命令运行方式类似); 2.打开一个新的浏览器窗口,并且转到http://localhost:9876 ; 3.选择“Capture this browser in strict mode”。 这个时候,你可以抛开你的窗口不管然后把这事忘了。JsTestDriver会自己把测试跑完并且把结果输出在你的终端里。 4.运行./scripts/test.sh进行测试 。 你应当看到类似于如下的结果:
[u]复制代码[/u] 代码如下:
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)
耶!测试通过了!或者没有... 注意:如果在你运行测试之后发生了错误,关闭浏览器然后回到终端关了脚本,然后在重新来一边上面的步骤。 [b]练习[/b] 为index.html添加另一个数据绑定。例如:
[u]复制代码[/u] 代码如下:
<p>Total number of phones: {{phones.length}}</p>
创建一个新的数据模型属性,并且把它绑定到模板上。例如:
[u]复制代码[/u] 代码如下:
$scope.hello = "Hello, World!"
更新你的浏览器,确保显示出来“Hello, World!” 用一个迭代器创建一个简单的表:
[u]复制代码[/u] 代码如下:
<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:
[u]复制代码[/u] 代码如下:
<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脚本 [b]总结[/b] 你现在拥有一个模型,视图,控制器分离的动态应用了,并且你随时进行了测试。现在,你可以进入到步骤3来为应用加入全文检索功能了。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部