AngularJs是google出品的一款Js框架,功能非常强大。
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
主要的问题有两点:
- AngularJs使用的是 dirty checking 来检测数据变动,在大数据量的data binding的时候,性能会成为一个问题:
- 学习曲线比较陡,因为功能基本上都是以自定义属性来扩展的,需要学习的新内容相当多