01. 概览

Angular是什么

AngularJS是一个为动态网站而生的结构性的框架（这句太难翻了）。它让你使用HTML作为模板语言，可以扩展HTML的语法，从而以清晰高效的方式来实现程序的组件。它创造性地以数据绑定和依赖注入技术减少了我们需要写的大量代码。由于它完全在浏览器端以JavaScript实现，所以它可以和任何服务器端技术完美搭配。

如果当初HTML被设计成开发应用程序的话，那它就应该是angularjs现在的样子。HTML是一种伟大的面向静态文档的声明式语言，但是它在创建应用程序方面欠缺很多，结果现在创建web程序就像是一种“我要做的，就是得用各种技巧哄着浏览器去做我想做的”的练习。

为了弥补动态应用程序与静态文档之间的鸿沟，我们经常这么做：

library - 一组用来编写web程序的函数集。你的代码是主体，看到哪个库合适就调用哪个库。比如：jQuery
frameworks - 一个web程序的特殊实现，你往上填代码，补充细节。framework是主体，当它需要某些特定的与程序相关的东西，它会来调用你的代码。比如：knockout,sproutcore，等等

Angular不走寻常路。它通过创建新的HTML结构来填充文档与程序之间的空隙。Angular使用一种我们称为"directive"的结构来教会浏览器使用新的语法。

示例如下：

使用{{}}进行数据绑定- 通过重复/隐藏DOM片断来控制DOM结构- 支持form和form验证- Attaching code-behind to DOM elements.- 将HTML分组形成可复用的组件

端到端的解决方案

Angularjs开箱提供了以下特色：

所有你创建一个CRUD程序所需要的工具：数据绑定，基本的模板指令(directive)，form验证，routing，deep-linking，可复用的组件，依赖注入- 可测试性：单元测试，端对端测试，mock，测试保护带- 预定义好目录结构和测试脚本的Seed程序作为快速起步项目

Angular想成为一种创建web应用程序的“端到端”的解决方案。意思是说，它不是在“创建web程序“这块大拉图上的一小块，而是一种”端到端“的解决方案（这不没解释吗？）This makes Angular opinionated about how a CRUD application should be built（TODO不会翻）。但因为它重视意见，所以它尽量让自己成为一个起点，你可以随时改变它。

Angular的看点

Angular通过向开者者提供更高层次的抽象来简化程序开发。当然，也所有的抽象一样，复杂性是它的代价。换言之，不是每一个程序都适合用angularjs来做。Angular适合用来做CRUD程序，所幸的是，90%的web程序都是CRUD程序。为了了解Angular适合做什么，也必须了解Angular不适合做什么。

游戏，GUI编辑器都是需要精细巧妙操作DOM的例子。这种程序跟CRUD差别太大，不适合用Angular。这种情况使用jQuery可能更合适。

一个引导性的Angular示例

下面是一个包含了Form的典型的CRUD程序。表单的值需要验证，要计算总数，并且按用户的区域来显示格式。这些都是一个应用程序开发者可能需要面对的：

把数据附加到UI上- 对用户输入进行读写和验证- 根据model计算新值- 根据用户指定的区域格式化输出

源代码

index.html

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="InvoiceCntl">
      <b>Invoice:</b>
      <br>
      <br>
      <table>
       <tr><td>Quantity</td><td>Cost</td></tr>
       <tr>
         <td><input type="integer" min="0" ng-model="qty" required ></td>
         <td><input type="number" ng-model="cost" required ></td>
       </tr>
      </table>
      <hr>
      <b>Total:</b> {{qty * cost | currency}}
    </div>
  </body>
</html>

script.js

<div class="mycode">
function InvoiceCntl($scope) {
  $scope.qty = 1;
  $scope.cost = 19.95;
}

End to end test

it('should show of angular binding', function() {
  expect(binding('qty * cost')).toEqual('$19.95');
  input('qty').enter('2');
  input('cost').enter('5.00');
  expect(binding('qty * cost')).toEqual('$10.00');
});

a jsfiddle demo (TODO)

试试上面的实例，然后我们看看这个例子，描述一下发生了什么

在<html>标签，我们用ng-app指令(directive)指明这是一个Angular程序。这个ng-app将触发Angular自动初始化你的程序。

我们使用 <script> 标签引入需要的angular文件：

<script src="http://code.angularjs.org/angular-?.?.?.min.js"></script>

从<input>标签的ng-model属性，angular自动设置好了双向数据绑定。我们也演示了如何简单地对输入进行验证：

Quantity: <input type="integer" min="0" ng-model="qty" required >
Cost: <input type="number" ng-model="cost" required >

这些input部件看起来相当普通，但考虑下这几点：

当页面导入后，angular把input的名字(qty和cost)绑定到变量上。可把这些变量想像成MVC设计模式中的Model
注意这些input部件有特别的能力。当你输入了不合法的数据，或者留空它们时，它们会自动变成红色。这些新的行为，让这些部件实现CRUD程序中常见的字段验证变得简单。

最后，是这个神奇的{{ 双层花括号 }}：

Total: {{qty * cost | currency}}

这个{{ _expression_ }}标记，是angularjs中用于数据绑定的特殊语法。表达式本身还可以为一个表达式与filter的组合：{{ express | filter }}。

Angular提供了filter用于格式化显示数据。

在上面的例子中，双花括号表达式指示Angular：“把我们从input部件中取到的数据绑定到显示区，把它们乘起来，并把结果格式化成货币的形式输出”

注意，我们实现了这种功能，却没有调用过Angular的方法，也没有像框架那样实现与程序紧密相关的行为。我们让浏览器的行为更像是动态web程序需要的，而不是静态文件需要的。因为不需要调用library/framework，Angular降低了这种阻抗不匹配。

Anguar信仰

Angular坚信对于构建UI和拼装组件，声明式的代码比命令式的更好，命令式的代码更适合实现业务逻辑。

把DOM操作与逻辑代码分开是一个好主意。它将显著提高代码的可测试性。- 把测试与写程序看得同等重要是一个更好的主意。测试的难度将显著影响代码的结构。- 把客户端与服务器端分开是一个很好的主意。因为它允许两边并行开发，和重用- 如果框架可以在全程引导开发者，是非常有帮助的：从设计UI，到业务逻辑，到测试- 如果能让常见的任务简单化，让难事变得容易，总是好的

Angular让你从以下痛苦中解脱出来：

注册回调函数：注册回调函数让你的代码变得凌乱，让人难以看到代码的全貌。把像这样的繁冗的代码移除，既能减少你的JavaScript代码量，又能让代码看起来清晰
手动操作DOM: 操作HTML DOM是AJAX程序的基础，但它既笨重又容易出错。Angular以声明的方式描述“当程序状态变化时，UI应该怎么变”的功能，让你不需要再做这种底层的工作。用Angular写的大多数程序，根本不需要这些操作，当然，如果需要你也可以做
数据与UI之间的交互: CRUD操作是AJAX程序的主要工作。考虑一下数据从server到HTML form的流程，我们要允许用户修改form，验证form，显示验证错误，将数据返回给内部model，再发送给server，这将会产生大量繁冗的代码。Angular几乎可省去全部这种代码，只剩下描述流程的代码，而不用管细节。
大量初始化工作: 通常你需要写大量的起始代码才能写一个简单的"Hello World"的AJAX程序。使用Angular，你可以使用与guice相似的风格来写代码，使用由Angular提供的大量services对象。这可以让你快速开发新的功能。另外，在自动化测试中，你拥有初始化阶段的完全控制权。

播放Angular的一个宣传片

这个宣传片比较早，不过可以注意到在2010年６月，angularjs就已经处于充实的开发期了。

TODO

(2013-01-01) 01. 概览