AngularJS 深度解析 – “超级英雄” JavaScript MVW 框架

随着 HTML5 的发展壮大以及现代浏览器性能的提升，许多 JavaScript 框架应运而生，以帮助开发富客户端应用程序。这些框架/库为开发者提供了强大的工具集，可以将企业级复杂度构建到客户端应用程序中。服务器端框架正逐渐成为过去，取而代之的是用 Backbone、Ember、AngularJS、Knockout 等编写的应用程序。

那么，为什么我要重点介绍 AngularJS，而不是 Backbone、Ember 或 Knockout 等框架/库呢？

对我而言，AngularJS 在以下几个方面具有显著优势：

• 完善的文档
• 用更少的代码实现更多功能
• Google 背书
• 良好的开发者社区
• 简单的数据绑定
• 体积小巧

我在这里不打算进行顶级竞争对手的并排比较——这部分内容我们将在未来的博客中，由我或我的同事来完成。本文的目的是激发你的兴趣，并带你了解 AngularJS 的几个关键特性——这个“超级英雄”JavaScript MVW 框架。让我们开始吧。

AngularJS 的关键特性

范围

Scope 的作用是检测模型对象的更改并为表达式创建执行上下文。
应用程序有一个根 Scope (ng-app)，并有层级嵌套的子 Scope。它将模型同步到视图，并将事件转发给控制器。其中有一个根 Scope (ng-app) 存在于应用程序中，并有层级化的子 Scope。它负责将模型同步到视图，并将事件转发给控制器。

请看我的 $scope 简单示例 http://embed.plnkr.co/0xbkRyGIWTkdMaJpSxog。（示例使用 Plunker 呈现。）

控制器 (Controller)

Controller 负责构造 Model，并将其与 View (HTML) 连接起来。Scope 位于 Controller 和 View 之间。Controller 应保持简洁，只包含视图所需的业务逻辑。通常，你希望 Controller 轻量级而 Services 功能强大。Controller 可以嵌套并处理继承。AngularJS 与其他 JavaScript 框架的一个重大区别在于，Controller 中没有 DOM 操作。这一点在开发 AngularJS 时需要进行调整。

Controller 示例： http://embed.plnkr.co/zbGwOkhPB8m60ChTtOQj

模型

在 AngularJS 中，Model 仅仅是一个 JavaScript 对象。无需继承任何东西或创建任何结构。这允许使用嵌套 Model —— 这是 Backbone 开箱即用不支持的功能。

视图

View 基于 DOM 对象，而非字符串。View 就是 HTML。HTML 是声明式的——非常适合 UI 设计。View 不应包含任何功能行为。这里的灵活性在于允许一个 Controller 对应多个 View。

服务

AngularJS 中的 Services 是单例，用于执行 Web 应用程序的常见任务。如果你需要在 Controller 之间共享通用功能，请使用 Services。AngularJS 内置的 Services 以 $ 开头。有几种构建 Service 的方法：Service API、Factory API 或 $provide API。

用于共享列表的 Service 示例： http://embed.plnkr.co/F69yhiETz3UqmVTl5frQ

数据绑定

AngularJS 中的 Data Binding 是 View 和 Model 之间的双向绑定。视图和数据模型之间的自动同步使得它非常容易（且直接）使用。更新 Model 会在 View 中得到反映，而无需任何显式的 JavaScript 代码来绑定它们，或添加事件监听器来反映数据更改。

我所有的示例都包含了数据绑定，但这里有一个超级简单的示例： http://embed.plnkr.co/dECGEtvMvcMwabCP1IoZ

指令

这个功能很酷。AngularJS 允许你使用 Directives 来转换 DOM 或创建新的行为。Directive 允许你以声明式的方式扩展 HTML 的词汇。'ng' 前缀代表 AngularJS 内置的 directives。App (ng-app)、Model (ng-model)、Controller (ng-controller) 等都内置于框架中。AngularJS 允许构建自己的 directives。构建 directives 并非极其困难，但也并非易事。你可以用它们做很多事情。请查阅 AngularJS 关于 directives 的 文档。

这是一个简单的秒表示例： http://embed.plnkr.co/UVzM2QRWHoZxFeg6jkPG

过滤器。

AngularJS 中的 Filters 用于数据转换。它们可以用于格式化（如我在 Directives 示例 中使用的补零），或者用于过滤结果（考虑搜索）。

既然我已经演示了格式化示例，这里是一个使用 Filter 进行搜索的示例： http://embed.plnkr.co/eIF14kLTJ3V8wkR5kthC

验证

AngularJS 包含一些围绕 HTML5 输入变量（text、number、URL、email、radio、checkbox）和一些 directives（required、pattern、minlength、maxlength、min、max）的内置验证。如果你想创建自己的验证，只需创建一个 directive 来执行你的验证即可。

这是一个使用 AngularJS 内置验证的示例： http://embed.plnkr.co/9CusuKxqf3axprjtgrFU

可测试性

对于企业级应用程序来说，测试是一个重要问题。有几种不同的方法可以针对 JavaScript 代码（因此也针对 AngularJS）编写和运行测试。AngularJS 的开发者提倡使用 Jasmine 测试，并通过 Testacular 运行。我发现这种测试方法非常直接，虽然编写测试可能不是最令人愉快的事情，但它与开发应用程序的任何其他部分一样重要。

结论

我非常享受使用 AngularJS 进行开发。我希望这篇文章至少能让你花几个小时去尝试一下 AngularJS。

要开始，请花些时间浏览 AngularJS 教程。然后创建你自己的自定义 AngularJS Plunker，看看客户端开发可以有多快。正如我一开始所说，AngularJS 拥有一个非常好的社区和非常清晰的文档，这些内容比本文的介绍要详细得多。感谢 AngularJS 团队开发了这个框架。

—— Josh McKinzie, asktheteam@keyholesoftware.com

资源 / 有用链接

• AngularJS 网站 - www.angularjs.org
• AngularJS 视频 - http://www.youtube.com/user/angularjs
• 感谢 Plunker - http://plnkr.co