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

书名：Mastering Web Application Development with AngularJS

Chapter 1

视图

我们已见了这许多AngularJS模版的例子，应当熟习到他并非“又涌现一个模板言语”，但确切照样有许多的差别（跟其他模板言语比拟）。不仅是说框架的模板语法依靠于HTML，还许可我们来扩大HTML的辞汇，而且另有可以在没有任何人工干预的状况下革新部份视图这类的举世无双的才能！

事实上，AngularJS 与 HTML 和 DOM 的联络更加亲昵，因为它就是依靠浏览器来剖析模版内容的（就跟浏览器会对任何其他的HTML文档所做的那样）。在浏览器把标记文本转化为 DOM 树以后，AngularJS就会进入这个剖析好的DOM构造。然后，每当碰到一个指令，AngularJS就会实行它的逻辑，并将指令变成动态的内容。

既然AngularJS 依靠于浏览器来剖析模板，我们就须要确保供应的模板是及格的HTML内容。要迥殊注意HTML标签的正确闭合（不然的话，不会输出毛病信息，但视图却不会被正确的衬着出来）。AngularJS 必须在正确的DOM树上事变。

AngularJS 使得雄厚HTML的辞汇表成为可以（我们可以增加新的属性或HTML元素，并教会浏览器应当怎样剖析他们）。这就像在 HTML 基础上建立一门特定范畴言语（domain-specific language），并指点浏览器怎样明白新的指令。你可以常常会听到AngularJS“教了浏览器一些新的技能”。

声明式模板视图 – 势在必行的掌握器逻辑

AngularJS自带了许多轻易的指令，我们将会在后面的章节中涵盖个中的大部份。最主要的事变，实在不是去相识单个指令的语法和功用，而是 AnulgarJS 构建 UI 的背地的哲学头脑。

AngularJS 推行了一套声明式的构建 UI 的体式格局。在实践中这意味着，模板会把重心放在怎样形貌一个希冀的效果，而不是怎样详细完成它。听起来可以有点疑心，那就看个例子吧。

让我们设想一下这类状况，我们须要建立一个form，用户可以输入一些简短的笔墨，然后可以点击按钮发送表单。固然这还涉及到一些用户体验的事变，比方笔墨长度须要限定在100字之内，假如超越范围就禁用 发送 按钮。用户须要在他们输入的时刻晓得还剩若干个字。假如盈余的字数小于10，那末提醒笔墨就要转变款式为正告的状况。也须要可以消灭已存在的笔墨。完成后的form可以看起来以下图：

上面这个需求不是迥殊有挑战性，也只是一个一般的文本表单，尽管云云，这里照样因为多须要整合的UI元素，比方，要确保按钮的 disabled 禁用状况可以一般事变，盈余字数要用恰当的款式来正确的显现等等。初次尝试的完成代码以下：

<div class="container" ng-controller="TextAreaWithLimitCtrl">
           <div class="row">
               <textarea ng-model="message">{{message}}</textarea>
           </div>
           <div class="row">
             <button ng-click="send()">Send</button>
             <button ng-click="clear()">Clear</button>
           </div>
   </div>

我们照样运用前面的代码作为出发点，在谁人基础上继承。起首，我们须要显现盈余字数，这个相称轻易，以下所示：

<span>Remaining: {{remaining()}}</span>

remaining() 函数定义在 TextAreaWithLimitCtrl 掌握器中的 $scope 上，以下：

$scope.remaining = function () {
    return MAX_LEN - $scope.message.length;
};

然后，我们须要在文本不符合字数限定的时刻禁用 Send 按钮。这个可以用 ng-disabled 指令很轻易的完成，以下：

<button ng-disabled="!hasValidLength()"...>Send</button>

这里运用了一个牢固情势。要操纵UI的话，只需打仗模板的一小部份，然后依据模子的状况（这里就是文本的长度）形貌一个希冀的输出效果（显现盈余字数，禁用按钮等）即可。最有意义的处所在于，我们不需在 JavaScript 代码中持有任何对DOM元素的援用，我们也不须要正确的操控DOM元素。如今我们只需关注模子的变化，让 AngularJS 去做那些死板沉重的事变去吧。我们所须要做的只是在这类情势的指令中供应一些发起。

继承回到我们的例子中来，我们还要确保盈余字数的提醒要在只剩下很少字数的时刻转变款式。这是一个可以可实战中进修另一个声明式UI的例子的好机会。以下所示：

<span ng-class="{'text-warning' : shouldWarn()}"> 
Remaining: {{remaining()}}
</span>

shouldWarn() 要领的完成以下所示：

$scope.shouldWarn = function () {
    return $scope.remaining() < WARN_THRESHOLD; 
};

CSS class 的变化是依据模子的变化而来的，然则我们并没有在 JavaScript 中写任何的操纵 DOM 的代码！UI 会基于以声明的体式格局表达的“想要干吗”而重绘。我们用 ng-class 指令所表达的意义是：“每次字数超越限定，都要通过把 text-warning 加到 <span> 元素的 class 上面 来给用户一个警示”。这跟下面这类说法是相称差别的 “当输入一个新的字符，而且字数超越了限定，就去找到 <span> 元素，然后转变这个元素的 CSS class text-warning”。（译注：两种差别的思绪，前一种是形貌你所愿望的状况，后一种是完整的把你要完成这类效果的历程形貌出来）。

我们这里说的彷佛只是有点玄妙的差别，但实在，声明式的和敕令式的是两种相称对峙的完成体式格局。敕令式的编程，重点在于形貌每个零丁的历程，并将效果导向愿望获得的效果。声明式的体式格局，重点在于愿望获得的效果。至于要到达这个效果的那些自力的步骤是由支撑这类体式格局的框架所体贴的。这就像是在说“亲爱的 AngularJS，这就是当模子到某个状况以后，我所愿望的UI可以展现的状况，如今呢，就请最先想一想什么时刻以及怎样来重绘这些UI吧”。

声明式的编程一般更富有表达力，因为把开辟人员从异常纤细的、底层的指令（编码）中解放出来了。产出的代码一般都异常的简约、易于浏览。但若要在事变中运用声明的体式格局，就必须有设备东西可以正确的明白更高等的指令。我们的顺序最先依靠于这些机械的决议，而且我们须要摒弃一些底层的掌握权。运用敕令式的体式格局，我们具有完整的掌握权，也能很好的协调好每个零丁的操纵。我们获得了更多的掌握权，这类“负责任”的价值就是要写异常多的底层的、反复的代码。

熟习 SQL 言语的读者会以为这些听起来都异常的熟习（SQL 是一个针对要求暂时(adhoc)数据的异常富有表达力的声明式的言语）。我们简朴的形貌一下须要获得的效果（去fetch的数据），以后的就是去让（关联型）数据库去想该怎样去拿到特定的数据了。绝大多数状况下，这个历程都能圆满的事变，我们也能很疾速的拿到我们所想获得的。固然也有一些状况须要给出更多的提醒（索引(indexes)，查询设计提醒(query planner hints)等等），或许手动掌握数据检索历程，以便优化机能。

AngularJS模板中的指令声明式的形貌了所希冀的效果，所以呢，我们得以从一步步的给出假如转变DOM元素的各个属性（基于 jQuery 的运用一般须要云云）中摆脱出来。AngularJS 尽力推行在模板上运用声明式的编程，而在javascript代码中是用敕令式的（掌握器和营业逻辑）。运用 AngularJS的话，我们很少会运用到初级的、敕令式的指令来操纵DOM（唯一的破例是在指令内里中的代码）。

就履历而言，万万不要在 AngularJS掌握器中操纵 DOM 元素。在掌握器中猎取一个DOM的援用，并操纵DOM的属性，是在用敕令式的体式格局掌握UI — 这是跟 AugularJS 构建 UI 的头脑相悖的。

运用 AngularJS 指令写出来的声明式的 UI 模板可以很敏捷的形貌出庞杂的、交互的UI。AngularJS 会自立做出所有这些底层决议什么时候以及怎样操纵DOM树的部份。绝大多数时刻 AngularJS 会做出“正确的事变”，并更新UI为所预期的(也异常实时的)。不过，明白 AngularJS 的内部事变道理也异常的主要，如许的话我们就可以在须要的时刻给框架一些恰当的提醒。这里的状况跟 SQL 又异常的类似，大多数状况下，我们都不须要为查询设计的事变状况费心。但当我们碰到机能题目的时刻，相识查询设计是怎样下决议的就异常有价值了，如许一来我们就可以给它供应更多的看法。这一样适用于 AngularJS 的UI 治理：我们须要相识背地的机制，以便于更高效的运用模板和指令。

模块和依靠注入

仔细的读者可以已发现了，到目前为止所用到的例子都是运用的全局的构造函数来定义掌握器的。然则，全局的状况是罪恶的，它危及了运用的构造，让代码更难以保护，测试，和浏览。AngularJS 绝不会发起运用全局状况的。相反，它供应了一整套的 API，可以很轻易的定义模块，在这些模块中注册对象。

AngularJS中的模块

我么一起来看看怎样把一个貌寝的，全局定义的掌握器转换为一致的模块化的定义。之前的掌握器是这么声明的：

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

模块化以后是如许的：

angular.module('hello', []) 
    .controller('HelloCtrl', function($scope){
        $scope.name = 'World';
    });

AngularJS 本身定义了一个全局的 angular 名字空间。这个名字空间供应了许多差别范例的东西和轻易的要领，module 就是这些要领的个中一个。module 会饰演一个其他的AngularJS须要治理的对象（掌握器、效劳等）的容器。正如我们以后就会看到的，除了简朴的称号空间和代码构造以外，模块另有异常多的东西须要进修。

要定义一个新的模块，我们须要给 module 要领的第一个参数供应模块的名字。第二个参数指定所须要依靠的模块（在之前的模块中，我们没有依靠与任何其他模块）。

对 angular.module 要领的挪用会返回一个新建立的模块的实例。一旦我们是用这个实例，就可以最先定义新的掌握器了。这异常的简朴，只需运用以下参数来挪用 controller 即可：
– 掌握器的名字（字符串范例）
– 掌握器的构造函数

全局定义的掌握器构造函数只适用于疾速示例和原型开辟。永久不要在大型的、实在的运用中运用全局定义的掌握器。

如今已定义了一个模块，但我们还须要关照 AngularJS 它的存在。这是通过给 ng-app 属性供应一个值来完成的，以下：

<body ng-app="hello">

一个常常犯的毛病就是忘记了在 ng-app 属性中指定模块的名字，这也会形成一些罕见的疑心。在 ng-app 属性中省略模块称号会引起毛病，申明有未定义的掌握器。

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