【译】《精通使用AngularJS开发Web App》（二） --- 框架概览，双向数据绑定，MVC，scope，控制器，模型

时间 2020-04-07

标签精通使用 angularjs 开发 web app 框架概览双向数据绑定 mvc scope 控制器模型栏目 AngularJS 繁體版

原文原文链接

上一篇：【译】《精通使用AngularJS开发Web App》（一）
下一篇：【译】《精通使用AngularJS开发Web App》（三）javascript

原版书名：Mastering Web Application Development with AngularJShtml

Chapter 1java

AngularJS速览

如今咱们已经知道了到哪儿去找框架的源码，以及相关的文档，如今咱们就能够开始编码了，在实战中看看AngularJS到底是什么样子的。
本书的这一部分将为随后的章节打下基础，会涵盖 AngularJS模板，模块化，和依赖注入。任何的AngularJS web app 都是由这些基础组建而成的。angularjs

Hello World - AngularJS示例

咱们对AngularJS的第一印象就用典型的 Hello, World! 来演示，看看用AngularJS是如何来写的，同时也看看它所使用的语法。web

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/
angular.js"></script>
</head>
<body ng-app ng-init="name='World'">
    <h1>Hello, {{name}}</h1>
</body>
</html>

首先须要引入AngularJS，这样才能在浏览器中正确运行。这就像AngularJS同样简单，它最简单的形式就是引用一个javascript文件。ajax

AngularJS 相对来讲仍是比较小的：压缩并gzip以后大概只有30KB，压缩不gzip的话大概有80KB。它并不依赖任何第三方类库。
本书的小例子中咱们会使用未经压缩的，开发友好的版本，在Google的CDN上。同时AngularJS的全部版本均可以在这里下载到：http://code.angularjs.orgexpress

在实际运行中，仅仅把AngularJS包含进来还不够，咱们还须要启动这个小应用。最简单的方式就是使用自定义的属性 ng-app 。segmentfault

<body> 标签附近能够看到另外一个非标准的 HTML 属性：ng-init。咱们可使用 ng-init 在模板被渲染以前来初始化模型。最后要说到的就是 {{name}} 表达式，它就是简单的把模型的值给渲染出来了而已。api

即使是在这最开始的、最简单的小例子中，也能够看到AngularJS模板系统的一些重要特性，以下所示：
- 自定义的 HTML 标签和属性能够给原本是静态的 HTML 文档增添动态行为。
- 两个花括号（{{expression}}）是一个用来输出模型值的表达式的定界符。
在 AngularJS 中，全部的能够被框架所理解和解析的特殊的 HTML 标签和属性都是指令（directive）。数组

双向数据绑定

对 AngularJS 来讲，渲染模板简直就是最拿手的工做了；特别是当要构建一个动态web 应用的时候，AngularJS简直就能发光升仙了。为了让我们能欣赏到 AngularJS 的真正的力量，咱们就用 input 来扩展一下以前的 Hello World，以下所示：

<body ng-app ng-init="name='World'">
    Say hello to:　<input type="text" ng-model="name">
    <h1>Hello, {{name}}</h1>
</body>

这个 input 标签处了额外的 ng-model 以外简直就毫无特别之处。真正的魔法力量将会在咱们在input 中输入文字的时候展示。忽然之间，屏幕会在每次键盘敲击以后进行重绘，显示出你所敲打的名字！要刷新一个模板，你并不须要编写任何一行代码，咱们也没有被强迫调用任何一个框架的 API 来更新数据模型。AngularJS 是足够聪明的，能够自动检测到模型的变化并相应的更新DOM。

大多数的传统的模板系统渲染模板时都是线性的，单向的：模型（变量）和模板被拼合在一块儿并将计算的结果输出。模型的任何改变都须要模板的从新计算。AngularJS无需如此，由于任何的用户引发的视图变化，都会当即映射到对应的模型中，同时，任何模型的变化也会立刻传播到模板中去。

AngularJS中的MVC

大部分现存的web应用都是构建在知名的 模型-视图-控制器（MVC） 模式的某种形式之上。可是 MVC 最大的问题在于，它自己并非一个很是清晰的模式，而是很高阶很结构化的。更糟糕的是，最原始的模式又变异、衍生出不少种模式（最知名的多是 MVP 和 MVVM）。要加入这些混乱的、不一样的框架，开发人员经常会对这些模式作出不一样的理解和解释。这样的结果就是，用着相同的 MVC 的名号，却在描述一个不一样的架构和编码实现。Martin Fowler 在他很优秀的关于GUI架构的文章中对此有很好的总结（http://martinfowler.com/eaaDev/uiArchs.html）。

就拿模型-视图-控制器来讲，它常常被拿来看成一个模式来讲事，但我却不以为把它当作一个模式是个什么好事，由于它自己包含了不少不一样的思路。不一样的人看到 MVC 不一样的地方会得出不一样的结论，并成他们的理解为 "MVC"。若是这尚未形成足够的混乱，那你终将会从根据对 MVC 的误解而开发的像 Chinese whispers(一个耳语传话的游戏，详见这里) 同样的系统中看到最后的效果。

AngularJS团队本着很是务实的态度来整个MVC模式家族，并宣称这个框架是基于MVW（模型-视图-随便你是啥）模式的。通常说来只有在实践中见识到来能感觉到（究竟如何）。

鸟瞰

咱们到如今为止所见到的 Hello World都尚未使用任何的分层策略：数据初始化，逻辑，还有视图都混在一个文件之中。在任何实际的应用中，咱们都须要把更多的注意力放在分配给每层的那些责任上面。幸运的是，AngularJS提供了一些不一样的构建方式，能够正确地构建更加复杂的应用。

本书后面的例子都会省略掉 AngularJS 的初始化代码（引入脚本，ng-app 属性，等等），这样更利于阅读。

咱们一块儿来看看这个稍微修改过的 Hello World：

<div ng-controller="HelloCtrl">
    Say hello to: <input type="text" ng-model="name"><br>
    <h1>Hello, {{name}}!</h1>
</div>

ng-init 属性被移除了，而后咱们增长了一个新的 ng-controller 指令，以及对应着一个 JavaScript 函数。这个 HelloCtrl 还接受一个至关神秘的 $scope 做为参数：

var HelloCtrl = function ($scope) {
     $scope.name = 'World';
}

Scope（做用域）

AngularJS中的 $scope 对象在这里就是要将域模型暴露给视图（模板）。只需把属性设置给 scope 实例，就能够在模板渲染时获得这个值。

Scopes（做用域）也能够针对特定的视图来扩展数据和特定的功能。只要在 scope 实例上定义一些函数就能将特定的 UI 逻辑暴露给模板了。

例如，你能够给 name 变量建立一个 getter 方法，以下所示：

var HelloCtrl = function ($scope) {
   $scope.getName = function() {
      return $scope.name;
   };
}

而后就像下面这样在模板中使用：

<h1>Hello, {{getName()}} !</h1>

$scope对象让咱们能够很是精确的控制这个域内的模型的哪一部分，以及哪些操做在视图层是可用的。理论上来说，AngularJS的 scopes 很是相似于 MVVM 模式的 ViewModel。

控制器

控制器的首要任务就是初始化scope对象。在实践中，初始化的逻辑由下面的这些责任组成：
- 提供模型初始化的值
- 扩展 $scope 的 UI 行为（方法）
控制器都是普通的 JavaScript 函数。他们并没必要去继承一些框架特定提供的类，也没必要去调用任何特定的 AngularJS API才能去正确的执行他们的任务。

请注意，控制器在设置模型的初始值时是跟 ng-init指令所作的任务同样的。有了控制器，才使得使用 JavaScript 来表达初始化的逻辑成为可能，而没必要拿代码把HTML模版搞的一团糟。

模型

AngularJS 的模型就是那些普通的 JavaScript 对象。咱们没必要被强迫去继承一些框架的基础类，也没必要以某种特殊的方式来初始化模型对象。

使用任何现有的，纯JavaScript类或对象，就跟在模型层同样的去使用它们也是能够的。同时也没有被限制说只能使用最原始的值来作模型属性（任何合法的JavaScript 对象或数组均可以使用）。要把模型暴露给 AngularJS，你只需把它赋值给 $scope 的属性便可。

AngularJS不是侵入式的，因此能够放心的把任何针对其余框架特定的代码拿来看成模型使用。

转载请注明来自[超2真人]
本文连接：http://www.peichao01.com/static_content/doc/html/Mastering_Web_Application_Development_with_AngularJS_2.html