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


Posted in Javascript onDecember 06, 2014

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试。

一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。

请重置工作目录:

git checkout -f step-2

我们的应用现在有了一个包含三部手机的列表。

步骤1和步骤2之间最重要的不同在下面列出。你可以到GitHub去看完整的差别。

视图和模板

在AngularJS中,一个视图是模型通过HTML**模板**渲染之后的映射。这意味着,不论模型什么时候发生变化,AngularJS会实时更新结合点,随之更新视图。

比如,视图组件被AngularJS用下面这个模板构建出来:

<html ng-app>

<head>

  ...

  <script src="lib/angular/angular.js"></script>

  <script src="js/controllers.js"></script>

</head>

<body ng-controller="PhoneListCtrl">
  <ul>

    <li ng-repeat="phone in phones">

      {{phone.name}}

    <p>{{phone.snippet}}</p>

    </li>

  </ul>

</body>

</html>

我们刚刚把静态编码的手机列表替换掉了,因为这里我们使用ngRepeat指令和两个用花括号包裹起来的AngularJS表达式——{{phone.name}}和{{phone.snippet}}——能达到同样的效果。

1.在<li>标签里面的ng-repeat="phone in phones"语句是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个<li>标签作为模板为列表中的每一部手机创建一个<li>元素。

2.正如我们在第0步时学到的,包裹在phone.name和phone.snippet周围的花括号标识着数据绑定。和常量计算不同的是,这里的表达式实际上是我们应用的一个数据模型引用,这些我们在PhoneListCtrl控制器里面都设置好了。

模型和控制器

在PhoneListCtrl控制器里面初始化了数据模型(这里只不过是一个包含了数组的函数,数组中存储的对象是手机数据列表):

app/js/controller.js:

function PhoneListCtrl($scope) {

  $scope.phones = [

    {"name": "Nexus S",

     "snippet": "Fast just got faster with Nexus S."},

    {"name": "Motorola XOOM™ with Wi-Fi",

     "snippet": "The Next, Next Generation tablet."},

    {"name": "MOTOROLA XOOM™",

     "snippet": "The Next, Next Generation tablet."}

  ];

}

尽管控制器看起来并没有起到什么控制的作用,但是它在这里起到了至关重要的作用。通过给定我们数据模型的语境,控制器允许我们建立模型和视图之间的数据绑定。我们是这样把表现层,数据和逻辑部件联系在一起的:

1.PhoneListCtrl——控制器方法的名字(在JS文件controllers.js中)和<body>标签里面的ngController指令的值相匹配。

2.手机的数据此时与注入到我们控制器函数的作用域($scope)相关联。当应用启动之后,会有一个根作用域被创建出来,而控制器的作用域是根作用域的一个典型后继。这个控制器的作用域对所有<body ng-controller="PhoneListCtrl">标记内部的数据绑定有效。

AngularJS的作用域理论非常重要:一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用域,同时还有模板中的信息,数据模型和控制器。这些可以帮助模型和视图分离,但是他们两者确实是同步的!任何对于模型的更改都会即时反映在视图上;任何在视图上的更改都会被立刻体现在模型中。

想要更加深入理解AngularJS的作用域,请参看AngularJS作用域文档。

测试

“AngularJS方式”让开发时代码测试变得十分简单。让我们来瞅一眼下面这个为控制器新添加的单元测试:

test/unit/controllersSpec.js:

describe('PhoneCat controllers', function() {
  describe('PhoneListCtrl', function(){
    it('should create "phones" model with 3 phones', function() {

      var scope = {},

      ctrl = new PhoneListCtrl(scope);
      expect(scope.phones.length).toBe(3);

    });

  });

});

这个测试验证了我们的手机数组里面有三条记录(暂时无需弄明白这个测试脚本)。这个例子显示出为AngularJS的代码创建一个单元测试是多么的容易。正因为测试在软件开发中是必不可少的环节,所以我们使得在AngularJS可以轻易地构建测试,来鼓励开发者多写它们。

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

基于AngularJS的项目被预先配置为使用JsTestDriver来运行单元测试。

你可以像下面这样运行测试:

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进行测试 。

你应当看到类似于如下的结果:

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来为应用加入全文检索功能了。

Javascript 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
AngularJS入门教程(一):静态模板
Dec 06 #Javascript
AngularJS入门教程(零):引导程序
Dec 06 #Javascript
AngularJS入门教程之学习环境搭建
Dec 06 #Javascript
AngularJS入门教程之Hello World!
Dec 06 #Javascript
JavaScript中的Web worker多线程API研究
Dec 06 #Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 #Javascript
JavaScript实现twitter puddles算法实例
Dec 06 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php实现的mongodb操作类
2015/05/28 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
jquery插件之easing使用
2010/08/19 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python装饰器语法糖
2019/01/02 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
给民警的表扬信
2014/01/08 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
标准发言稿结尾
2019/07/18 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS
MySQL添加索引特点及优化问题
2022/07/23 MySQL