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

2019年8月26日 160次阅读 来源: 超2真神

上一篇：【译】《通晓运用AngularJS开辟Web App》（一）
下一篇：【译】《通晓运用AngularJS开辟Web App》（三）

原版书名：Mastering Web Application Development with AngularJS

Chapter 1

AngularJS速览

如今我们已知道了到哪儿去找框架的源码，以及相干的文档，如今我们就可以够最先编码了，在实战中看看AngularJS终究是什么模样的。
本书的这一部份将为随后的章节打下基本，会涵盖 AngularJS模板，模块化，和依靠注入。任何的AngularJS web app 都是由这些基本组建而成的。

Hello World – AngularJS示例

我们对AngularJS的第一印象就用典范的 Hello, World! 来演示，看看用AngularJS是怎样来写的，同时也看看它所运用的语法。

<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文件。

AngularJS 相对来说照样比较小的：紧缩并gzip以后也许只要30KB，紧缩不gzip的话也许有80KB。它并不依靠任何第三方类库。
本书的小例子中我们会运用未经紧缩的，开辟友爱的版本，在Google的CDN上。同时AngularJS的一切版本都能够在这里下载到：http://code.angularjs.org

在现实运转中，仅仅把AngularJS包括进来还不够，我们还须要启动这个小运用。最简朴的体式格局就是运用自定义的属性 ng-app 。

<body> 标签四周能够看到另一个非标准的 HTML 属性：ng-init。我们能够运用 ng-init 在模板被衬着之前来初始化模子。末了要说到的就是 {{name}} 表达式，它就是简朴的把模子的值给衬着出来了罢了。

即便是在这最最先的、最简朴的小例子中，也能够看到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

    原文作者：超2真神
    原文地址: https://segmentfault.com/a/1190000000360976
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞