Page 25 - AngularJS权威教程

2.1 AngularJS 中的数据绑定 5

请注意，在本章的示例代码中为了方便展示第一个核心概念，我们并没有用最 1
佳方式编写控制器。这也是本书唯一一处我们不鼓励将示例代码应用在实际生
产中，而只作为学习范例的地方。
2
2.1 AngularJS 中的数据绑定
3
在Rails等传统Web框架中，控制器将多个模型中的数据和模板组合在一起形成视图，并将其
提供给用户，这个组合过程会产生一个单向视图。如果没有创建任何自定义的JavaScript组件，视 4
图只会体现它渲染时模型暴露出的数据。在写这篇文章时，已经出现了好几个可以在视图和模型
之间自动进行数据绑定的框架。
5
AngularJS则采用了完全不同的解决方案。它创建实时模板来代替视图，而不是将数据合并
进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。这个功能可以说是 6
AngularJS中最重要的功能之一，也是让我们只用10行代码，并且在没有任何JavaScirpt的情况下
就可以写出Hello World的关键。
7
要实现这个功能，只要在HTML页面中引用angular.js，并在某个DOM元素上明确设置
ng-app属性即可。ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们
可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才 8
会受AngularJS影响。
9
视图中的插值会在计算一个或多个变量时被动态替换，替换结果是字符串中的
插值被变量的值替代。
10

例如，如果有一个叫做name的变量，它的值是“Ari”，那么视图中的"Hello
{{ name }}"字符串会被替换成“Hello Ari”。 11

自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时，
视图就能反映出这些变化，并且不需要写任何自定义的代码，它就可以工作。 12

在MVC（Model View Controller，模型视图控制器）的世界里，控制器可以不必担心会牵
13
扯到渲染视图的工作。这样我们就不必再担心如何分离视图和控制器逻辑，并且也可以使测试变
得既简单又令人愉悦。
14

MVC是一种软件架构设计模式，它将表现从用户交互中分离出来。通常来讲，
模型中包含应用的数据和与数据进行交互的方法，视图将数据呈献给用户，而 15
控制器则是二者之间的桥梁。

①
这种表现分离 能将应用中的对象很好地隔离开来，因此视图不需要知道如何保 16
存对象，只要知道如何显示它即可。这也意味着数据模型不需要同视图进行交
互，只需要包含数据和操作视图的方法。控制器用来存放将二者绑定在一起的
业务逻辑。 17

—————————— 18
① http://martinfowler.com/eaaDev/uiArchs.html