Angular： 您一直在等待的 DOM API

引言

Angular.js，是由 Google 创建的一个 JavaScript 库和框架，它提供了一种构建出色 Web 应用程序的全新视角。你可以阅读大量文章，了解它如何分离应用程序的关注点、提高可测试性并坚持 Web 应用程序的最佳实践，但我想重点介绍一个不常被提及的功能：扩展文档对象模型 API。

您将学到什么

• Angular 模板基础
• 模板秘诀
• 特定领域的语法

你应该知道什么

• HTML 基础
• JavaScript 基础

让我们直接开始构建一个 Twitter 时间线用户界面。我想展示我最近的推文，并允许用户点击任何推文并突出显示它。

模板 1. Angular 模板

<ul>
  <li ng-repeat="tweet in tweets" class="tweet {{tweet.highlight}}" ng-click="selectTweet(tweet)">
    <h4>{{tweet.text}}</h4>
    <ul ng-show="tweet.entities.hashtag.length == 0">
      <li ng-repeat="hashtag in tweet.entities.hashtag">{{hashtag.text}}</li>
    </ul>
    <span ng-repeat="user in tweet.contributors">
      <span>@{{user.screen_name}}</span>
    </span>
  </li>
</ul>

这里我们有一个 Angular 模板的示例，展示了你的模板可以有多么灵活。这里发生了很多事情，所以我将分解它。

<li ng-repeat="hashtag in tweet.entities.hashtag">{{hashtag.text}}</li>

指令 'ng-repeat' 在此示例中使用了几次，因为它非常强大。它既为数组中的每个元素重复该元素，又将该对象添加到元素的范围内。它不会改变范围，这与像 *handlebars.js* 这样的其他模板引擎的一个重要区别在于，后者需要 '../' 才能访问对象范围之外的值。 Angular 确实使用 {{}} 的 Mustache 语法来插入值。

<ul ng-show="tweet.entities.hashtag.length == 0">

指令 'ng-show' 告诉 Angular 根据你传入的语句显示或隐藏。 你可以在这里使用各种语句，因此它增加了很多灵活性。 重要的一点是，我们没有给这个指令 JavaScript，而是一个由 Angular 解析的字符串。 '==' 与 JavaScript 中的 '==' 不同，更像 '==='。

<li ng-repeat="tweet in tweets" class="tweet {{tweet.highlight}}" ng-click="selectTweet(tweet)">

'ng-click' 展示了 Angular 的另一个不同之处，它是与控制器范围的直接绑定。 让我展示一下控制器是什么样的。

控制器 1. Angular 控制器

function($scope) {
  $scope.tweets = Twitter.getTimeline('1950787875');
  $scope.selectTweet = function(tweet) {
    if(tweet.highlight === 'highlight') {
      tweet.highlight = '';
    } else {
      tweet.highlight = 'highlight';
    }
  };
};

正如你所看到的，当 Angular 调用控制器函数时，它会将作用域传递给控制器函数。 作用域是连接视图和控制器的对象。 让我们假设在本示例中，我们有一个全局对象 Twitter，它有一个方法 getTimeline，当使用用户 ID 调用时，它返回一个推文数组。 当我们设置 'tweets' 时，Angular 将使用它将模板渲染到 DOM 中。 'ng-click' 将该元素上的点击事件链接到范围中的函数 selecTweet，允许你传递参数。 同样需要注意的是，你传递给 'ng-click' 的内容不是直接在 JavaScript 中运行的，而是由 Angular 解析的。 不要被它绊倒。

这展示了基础知识，但我们还没有深入了解 Angular 模板的强大之处。 Angular 旨在构建特定领域的语言。 这允许你有效地扩展 DOM，专为你应用而设。 让我向你展示一下该模板的样子。

模板 2. 带有自定义指令的 Angular 模板

<ul>
  <li ng-repeat="tweet in tweets" class="tweet {{tweet.highlight}}" ng-click="selectTweet(tweet)">
    <h4>{{tweet.text}}</h4>
    <entities ng-model="tweet.entities"></entities>
    <div ng-repeat="user in tweet.contributors">
      <user ng-model="user"></user>
    </div>
  </li>
</ul>

如果你熟悉 HTML，你会很快注意到 <entities> 和 <user> 不是 HTML 元素。 这些是为此应用程序创建的 Angular 元素。 <entities> 接收 'ng-model' 传入的实体列表并渲染它们。 <user> 对用户对象执行类似的操作。 这清理了我们的主模板，并使模板可扩展和可重用。 现在，实体和用户都有自己的模板。

<ul ng-show="hashtags.length == 0">
    <li ng-repeat="tag in hashtags">{{tag.text}}</li>
</ul>

这是实体模板。 正如你所看到的，这里的模板更干净，但现在我们也可以在 Angular 应用程序的其他位置使用实体。 一旦我们将 <entities> 标签放置在我们的应用程序中，进行更改就变得很简单。 我在这里展示的 Angular 的秘诀是指令。 指令是可以添加到 DOM 中任何元素的一组功能，并且以几种不同的方式显示。 我刚刚向你展示了 'ng-*' 和 '<*></*>'。 这两者行为不同，一个向元素添加功能，另一个创建一个新元素，但它们都基于相同的思想。

开箱即用，我们获得了一个以我们习惯的方式呈现的推文快速列表，<li> 元素。 如果我们需要更多功能，我们可以通过特定领域的指令来构建我们自己的元素。 我们有能力快速在这些元素上添加事件侦听器，并将模型值绑定到元素文本。

我并不是说你不能使用其他框架做到这一点，但是使用 angular.js，你拥有一套工具，可以获取 DOM 并扩展它，从而使动态应用程序易于编写和理解。 加上 Google 的支持以及不断壮大的、聪明的开发者社区，你就拥有了一个每个 JavaScript 开发人员都需要尝试的优秀框架。