【4】【译】《精通使用AngularJS开发Web App》(四)--- 深入视图,模板系统,模块和依赖注入

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;
};



喜欢 ()