AngularJS入门教程之AngularJS 模板


Posted in Javascript onAugust 18, 2016

是时候给这些网页来点动态特性了——用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}}——能达到同样的效果。

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

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

AngularJS入门教程之AngularJS 模板

模型和控制器

在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."}
 ];
}

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

PhoneListCtrl——控制器方法的名字(在JS文件controllers.js中)和<body>标签里面的ngController指令的值相匹配。
手机的数据此时与注入到我们控制器函数的作用域($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来运行单元测试。你可以像下面这样运行测试:

在一个单独的终端上,进入到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>

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

总结

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

以上就是对AngularJS 模板的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
vue.js的安装方法
May 12 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
JS+CSS实现炫酷光感效果
Sep 05 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
AngularJS入门教程之静态模板详解
Aug 18 #Javascript
AngularJS入门教程引导程序
Aug 18 #Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 #Javascript
js 获取站点应用名的简单实例
Aug 18 #Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 #Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 #Javascript
AngularJS 整理一些优化的小技巧
Aug 18 #Javascript
You might like
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
javascript读写json示例
2014/04/11 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
初步理解Python进程的信号通讯
2015/04/09 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
python的json包位置及用法总结
2020/06/21 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
数控技校生自我鉴定
2014/04/19 职场文书
表扬信范文
2019/04/22 职场文书