AngularJS入门教程的AngularJS模板

是时候给这些页面一些动态功能了。——使用AngularJS！我们在这里添加了一个测试，以便稍后添加控制器。

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

请重置工作目录：

git结账-f步骤-2

我们的应用程序现在有一个三部手机的列表。

下面列出了步骤1和步骤2之间最重要的区别。你可以去GitHub看看完全不同。

视图和模板

在AngularJS中，视图是模型通过HTML**模板**渲染后的映射。这意味着每当模型改变时，AngularJS都会实时更新关节点，然后更新视图。

例如，视图组件是由AngularJS用以下模板构建的：

html ng-apphead.script src=' http : lib/angular/angular . js '/script script src=' http : js/controller . js '/script/Head body ng-controller=' phone list ctrl ' ul Li ng-repeat=' phone in phone ' { phone . name } } p { { phone . snippet } }/p/Li/ul/body/html我们刚刚替换了静态编码的电话列表。因为在这里我们使用了ngRepeat指令和两个用花括号包装的AngularJS表达式——{{phone.name}}和{{phone.snippet}}——来达到同样的效果。

li标记中的ng-repeat=' phones in phones '语句是一个AngularJS迭代器。这个迭代器告诉AngularJS使用第一个li标签作为模板，为列表中的每个手机创建一个li元素。

正如我们在第0步中了解到的，花括号将phone.name和phone.snippet括起来，以标识数据绑定。与常量计算不同，这里的表达式实际上是我们应用的一个数据模型引用，是在PhoneListCtrl控制器中设置的。

模型和控制器

在PhoneListCtrl控制器中初始化数据模型(这里只是一个包含数组的函数，数组中存储的对象就是电话数据列表):

app/js/controller.js:

function phone listcrl($ scope){ $ scope . phones=[{'name': ' Nexus S '，' snippet': 'Fast刚用Nexus S . '跑得更快' }，{ ' name ' : '带Wi-Fi的摩托罗拉XOOM '，' snippet': '下一代，下一代平板电脑'}，{'name': 'MOTOROLA XOOM '，' snippet': '下一代平板电脑'} ];}虽然控制器似乎没有起到任何控制作用，但它在这里起着至关重要的作用。通过给出数据模型的上下文，控制器允许我们在模型和视图之间建立数据绑定。这是我们连接表示层、数据和逻辑组件的方式：

PhoneListCtrl——控制器方法的名称(在JS文件controllers.js中)与主体标记中的ngController指令的值相匹配。这时，手机的数据与注入我们控制器功能的scope ($scope)相关联。当应用程序启动时，将创建一个根范围，控制器的范围是根范围的典型后继者。此控制器的作用域对所有body ng-controller=' phone listcrl '标记内的数据绑定有效。

AngularJS的范围理论非常重要：一个范围可以看作是模板、模型和控制器协同工作的粘合剂。AngularJS使用范围，以及模板、数据模型和控制器中的信息。这些可以帮助分离模型和视图，但是它们是真正同步的！对模型的任何更改都将立即反映在视图上；视图中的任何更改都会立即反映在模型中。

要更深入地了解AngularJS的范围，请参考AngularJS范围文档。

试验

“AngularJS方式”使得在开发过程中测试代码变得非常简单。让我们看一下控制器的以下新单元测试：

测试/单元/控制器Spec.js:

description(' PhoneCat controllers '，function() { description(' PhoneListctrl ')，function(){它('应该用3个电话创建' phones '模型'，function() { var scope={}，ctrl=new PhoneListCtrl(作用域)；expect(scope.phones.length)。托比(3)；});});});这个测试验证了我们手机阵列中有三条记录(暂时不需要理解这个测试脚本)。这个例子展示了为AngularJS代码创建单元测试是多么容易。因为测试是软件开发中必不可少的一部分，所以我们可以很容易地在AngularJS中构建测试，以鼓励开发人员编写更多的测试。

编写测试时，AngularJS的开发人员倾向于使用Jasmine行为驱动开发(BBD)框架中的语法。虽然AngularJS没有强迫你使用Jasmine，但是我们在教程中的所有测试都是用Jasmine编写的。你可以在茉莉的官方主页或茉莉维基上获得相关知识。

基于AngularJS的项目被预先配置为使用JsTestDriver运行单元测试。您可以按如下方式运行测试：

在单个终端上，输入angular-phonecat目录并运行。/scripts/test-server.sh开始测试(请输入。\scripts\test-server.bat在Windows命令行下运行脚本，并且脚本命令以类似的方式运行)；

打开新的浏览器窗口，转到http://localhost :9876

选择“以严格模式捕获此浏览器”。

这时，你可以把你的窗户放在一边，忘掉它。JsTestDriver将自己运行测试，并将结果输出到您的终端。

快跑。/scripts/test.sh进行测试。

您应该会看到类似以下的结果：

Chrome:转轮复位.总共1次测试(通过： 1；fail : 0；错误： 0) (2.00毫秒)Chrome 19.0.1084.36 Mac OS:运行1次测试(passed : 1；fail : 0；错误0) (2.00毫秒)耶！考试通过了！或者不是.注意：如果运行测试后出现错误，请关闭浏览器，然后返回终端，关闭脚本，然后重新启动。

练习

为index.html添加另一个数据绑定。例如：

p电话总数： {{phones.length}}/p

创建新的数据模型属性并将其绑定到模板。例如：

$scope.hello='Hello，World！'

更新你的浏览器，确保“你好，世界！”显示

用迭代器创建一个简单的表：

表tr throw 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 throw 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)后单元测试失败，然后再次运行。/.

摘要

现在您有了一个模型、视图和控制器分离的动态应用程序，您可以随时测试它。现在，您可以转到步骤3，将全文搜索功能添加到您的应用程序中。

以上是AngularJS模板的整理，后续继续补充相关信息。感谢您对本网站的支持！