当前位置：Gxlcms > JavaScript > AngularJS入门教程（二）：AngularJS模板_AngularJS

AngularJS入门教程（二）：AngularJS模板_AngularJS

时间：2021-07-01 10:21:17 帮助过：12人阅读

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

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

请重置工作目录：

代码如下:

git checkout -f step-2

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

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

视图和模板

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

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

代码如下:

...
输出在你的终端里。

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添加另一个数据绑定。例如：

代码如下:

Total number of phones: {{phones.length}}

创建一个新的数据模型属性，并且把它绑定到模板上。例如：

代码如下:

$scope.hello = "Hello, World!"

更新你的浏览器，确保显示出来“Hello, World!”

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

代码如下:

    row number
{{i}}

row number
{{i}}

现在让数据模型表达式的i增加1：

代码如下:

    row number
{{i+1}}

row number
{{i+1}}

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

总结

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

AngularJS入门教程（二）：AngularJS模板_AngularJS

人气教程排行