从jQuery到Angular开发者之路

在学习Angular时一个最常被问到的问题是：我有jQuery开发的背景，我应该怎样思考Angular？

jQuery本身是一个简单地DOM操作的实用JS库。它是一个对于DOM操作必要的包装，而不是一个构建web应用的工具。显然我们可以使用jQuery来构建动态网站，但是这就好比使用一个锤子来锯木头一样...为什么不买一个锯子来做正确事呢？

本文旨在阐述如何在不抛弃jQuery的前提下思考Angular。jQuery是一个经过多年的发展后非常成熟的工具，它可以同Angular一起使用，我们在项目中也会使用它。

在本文中，我们将经历怎样来思考Angular以及最终提供一个用于构建高效、快捷稳定的Angular应用的模型。

在下面的部分中，我们将通过一个jQuery应用来证明如何用Angular来构建它。

[b]怎样实用jQuery来构建web应用[/b]

$(document).ready(function() {
  $("#article").click(function(evt) {
    $("#article_placeholder").append("Angular for the jQuery developer");
  });
}); 

过去，作为开发者我们常常需要人为改变DOM内容来构建一个动态页面。

我们首先布局好网页结构，然后根据内容来设计CSS，最后为页面添加互动性。也就是说，我们将互动性放置在构建过程的后面，互动性被当做了第二类公民被对待。

[b]为什么jQuery不适合构建web应用？[/b]
观察源码，我们将动作通过ID绑定到了特定的DOM上。要是一个团队成员认为#message并不足以指定DOM元素该怎么办？我们可能会改变整个DOM来适应新的设计，或者我们会增加一个新的功能来包含#name这个ID。

[b]紧耦合[/b]
我们的Javascript与HTML之间的关联太紧密了。如此紧密的联系在保持Javascript与HTML同步时常常会需要花费大量的工作。每当我们改变DOM时我们必须要加倍小心注意乙方Javascript的功能发生改变。

[b]代码混乱[/b]
当使用jQuery时，web应用的功能代码并没有清晰的组织结构；怎么组织代码完全有我们决定。

[b]用低级工具创建高级功能[/b]
当我们创建任何复杂程度的web应用时，我们会被强制的使用低级DOM操作工具来编写我们的自定义行为而不是专注于功能的实现。

Angular使用一种完全不同的方式来构建web应用：它将构建互动性当做一种原生组件并且鼓励在开发应用的过程中使用互动性。

当我们创建Angular应用时需要记住下面8个核心观点：

[b]1)在HTML中声明互动性[/b]
但我们编写Angular应用时，我们不回把页面和互动性分开；相反，我么会在HTML中定义功能。如果我们想在点击按钮时执行一个动作，我们就把动作绑定在按钮上：

<!-- 调用 runAction() 方法 -->
<button ng-click="runAction()">Run action</button>   

这样做允许我们显式的声明DOM行为。另外，DOM元素也显式的告诉我们它们在浏览器中的行为动作。

命令式编程(imperative programming)：告诉“机器”怎么做，你想要发生的就会发生。
声明式编程(declarative programming)：告诉机器你想要什么发生，然后让机器自己决定应该怎么做。

[b]2）单独编写DOM[/b]
Angular使用一个非常明确的策略是用数据来驱动功能。我们与一个数据对象进行互动（叫做$scope），而不是构建一个页面去操作。

当你想要改变视图(view)中的内容时，我们改变与其绑定的数据然后让Angular来决定怎么改变DOM。

<!-- 在浏览器中展示名字 -->
<h1>Welcome {{ name }}</h1>
<!-- 将input绑定到name -->
<input ng-model="name" 
      name="name" 
      placeholder="Enter your name" />

在这个例子中我们完全不需要去操纵DOM。这一点允许我们在编写HTML时就设计DOM的行为。

[b]3）架构应用[/b]
编写一个Angular应用允许我们从构建一个应用的角度来思考。我们能够专注于功能，比如理解我们的应用如何同服务器端的API互动，以及当我们点击一个按钮时发生的路由行为。

我们需要考虑如何将功能分割为一些小的模块使我们的应用更容易扩展和测试。

[b]4）改正jQuery的坏习惯[/b]
当我们刚开始学士Angular时，常常会不由自主的区使用jQuery当做拐杖。我们强烈推荐在一开是学习Angular时不要引入jQuery。

所有jQuery能做的事情，我们也能用Angular做到，而且只需要很少的代码。

如果我们坚持使用Angular而不依赖于那些作为拐杖的工具，我们就可以写出更有效率，更具扩展性以及测试性更加好的应用。如果你想要构建一个Angular中不存在的功能，看看Angular社区，也许已经有人创建好了。

[b]5）视图是状态的官方记录[/b]
Angular应用使用视图作为互动性和数据的容器。我们使用指令为视图添加功能，反过来，使用数据绑定在应用中创建一个显示的数据动作链。

上面代码中使用的fs-modal指令非常清楚的阐明了

元素的职责所在。改变视图职责的唯一方式是改变HTML，而不是像在命令式编程中需要在需要在一个外部文档中做出改变。

[b]6）模型改变视图，视图改变模型[/b]
Angular中一个最基本最酷的特征是我们除了编写HTML之外不需要担心DOM。

不像jQuery中我们在运行过程中保持状态或者查询document时需要命令式的构建元素并绑定它们，使用Angular可以让我们专心于构建基于数据的功能。

例如，为了展示一个载入指示器，我们可以更具一个模型的值来设置一个布尔标记用于显示或者隐藏元素：

<div ng-show="isLoading">
  <img src="/images/loading.gif" />
</div>  

现在，无论我们何时需要载入新数据，我们可以简单的改变这个“开关”（通过将isLoding设置为true）。当我们的数据载入完成时，我们可以将开关关闭，然后指示器就会隐藏。

$scope.loadNewData = function() {
  $scope.isLoading = true;
  $http.get('/api/data.json')
  .success(function(data) {
    $scope.data = data;
    $scope.isLoading = false;
  })
  .error(function(reason) {
    $scope.isLoading = false;
  });
}  

如果我们在控制器中更新了模型，视图也会更新。如果我们在视图中改变了模型，控制器中的模型也会改变，所有的部分都有保持同步。

Angular的魔法是在全过程中，我们不需要思考 -- 只需要专心于我们构建的功能即可。

[b]7)依赖，依赖，依赖 -- 我的天！[/b]
另外一个Angular中幕后的无缝处理器是依赖注入：我们只需要告诉Angular我们需要什么去操作应用，只要Angular发现它，Angular就会自动帮我们载入它。

[b]8）驱动测试开发[/b]
Angular中一个非常好的成分是它从开始构建到结束，都是可测试的。当我们编写测试时，我们不仅能保证我们的web应用是可运行的，我们使用的成分也是按照预期可运行的。

Angular时时刻刻都是在由测试驱动构建，因此，我们可以非常容易的编写可测试的应用。

我们可以为应用的任何一个部分编写测试 -- 为模型层，服务层，视图层，等等。

我们可以从开发者的角度测试（以及单元测试每一个组件）或者从用户的角度测试（通过端到端的测试，当我们在浏览器中个字啊如应用时，我们告诉测试框架去点击按钮以测试视图是否按照我们期待的显示）。

当我们每次进行一个微小的改动后想测试一下功能是否能运行时再也不需要人为的去点击按钮了。

[b]总结[/b]
当我们从Angular的角度思考时，我们需要考虑：

视图，而不是DOM元素
指令，而不是事件绑定
模型作为视图的工程
功能分离

转：http://www.angularjs.cn/A0o6