AngularJs是google出品的一款Js框架，功能非常强大。

首页：http://angularjs.org/

github：https://github.com/angular/angular.js

中文社区：http://angularjs.cn/tag/AngularJS

官方有给出Tutorial：http://code.angularjs.org/1.2.13/docs/tutorial/step_00

Angular和Backbone相比，复杂度上去了不止一个档次，功能也强大了不止一个档次，是一款纯正的MVC框架。我们接下来从程序的角度来分析下AngularJs的组成。

Sample Tutorial

在页面的HTML元素上（一般是div、body、html），添加ng-app这个自定义属性，该属性所属标签的HTML子集，将会被作为AngularJs应用进行解析。在ng-app下属的某个HTML元素上，添加ng-controller自定义属性，则该属性所属标签的HTML子集，就被定义为一个controller的scope。

在JavaScript代码中，需要创建相对应的controller AngularJs的module。

[codesyntax lang="javascript"]

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
  ...
});

[/codesyntax]

然后在该controller的$scope内，绑定你的模型数据。

[codesyntax lang="javascript"]

$scope.phones = [
  {'name': 'Nexus S',
   'snippet': 'Fast just got faster with Nexus S.',
   'age': 1},
  {'name': 'Motorola XOOM™ with Wi-Fi',
   'snippet': 'The Next, Next Generation tablet.',
   'age': 2},
  {'name': 'MOTOROLA XOOM™',
   'snippet': 'The Next, Next Generation tablet.',
   'age': 3}
];

[/codesyntax]

最后在HTML页面上，使用带参数的模板代码进行展示。

[codesyntax lang="html4strict"]

<body ng-controller="PhoneListCtrl">
  <ul>
    <li ng-repeat="phone in phones">
      
      <p></p>
    </li>
  </ul>
</body>

[/codesyntax]

最简单的MVC的例子就是这样了。

Core Concepts

  • AngularJs的核心思想是扩展式的HTML
    • 使用ng-*这样的自定义HTML属性，Angular将框架功能直接附加到HTML上。
    • 附加有自定义属性的HTML将会有额外的功能。
  • 非标准化的、自定义的 JavaScript 接口和工具。
    • 几乎任何你在开发中使用到的功能点，AngularJs都有包含，你只需要学习AngularJs就可以了（真的么？）
    • 相对的，这也增加了AngularJs的学习曲线，需要学习的内容非常多。
  • 所有的核心代码都模块化
    • angular.module('phonecatServices', ['ngResource']);
  • 强烈依赖于依赖注入、工厂模式。
  • 数据绑定使用的是 dirty checking
  • ng作用域
    • 附加有ng-app属性的HTML及其子集才会被AngularJs进行解析。
    • 附加有ng-controller属性的HTML及其子集才会被AngularJs作为controller的$scope附加功能，controller的$scope里的内容在HTML中可以直接访问、使用，即便是函数也一样。

Model

AngularJs里的数据模型和Backbone的理念差别很大。Backbone是需要程序员自己定义自己的模型，并维护一系列的get、set、save等函数。而AngularJs里的数据则仅仅只是存储在controller的$scope里的一个JavaScript Object，AngularJs会使用 dirty checking 来检测数据的变化，并触发对应的事件。并且在AngularJs里，数据绑定天生就是双向的。

Controller

Controller依然是做事情最多的地方，当然相对于Backbone将controller应该做的事情扔到Model和View里面还是好太多太多了。

View

AngularJs集成了自己的渲染引擎，使用起来非常便利，在诸多ng-*属性功能的支援下，能非常便利地渲染出HTML页面。并且也带有拆分、重用等功能。

Concerns

主要的问题有两点：