AngularJS 模板

时间 2019-12-01

原文原文链接

一个应用的代码架构有不少种。对于AngularJS应用，咱们鼓励使用模型-视图-控制器（MVC）模式解耦代码和分离关注点。考虑到这一点，咱们用AngularJS来为咱们的应用添加一些模型、视图和控制器。html

请重置工做目录：git

git checkout -f step-2

咱们的应用如今有了一个包含三部手机的列表。angularjs

步骤1和步骤2之间最重要的不一样在下面列出。，你能够到GitHub去看完整的差异。github

视图和模板

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

好比，视图组件被AngularJS用下面这个模板构建出来：api

<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控制器里面都设置好了。

模型和控制器

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

尽管控制器看起来并无起到什么控制的做用，可是它在这里起到了相当重要的做用。经过给定咱们数据模型的语境，控制器容许咱们创建模型和视图之间的数据绑定。咱们是这样把表现层，数据和逻辑部件联系在一块儿的：app

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)