先推荐几个教程
1. AngularJS入门教程 比较基础，是官方Tutorial的翻译。
2. 七步从AngularJS菜鸟到专家 也比较基础，制作了一个在线音乐播放网站。
3. 这个教程比较全面，但我感觉翻译的有些晦涩难懂。
看过这些教程后，觉得AngularJS也懂一点了，就想用它干点事，就分析一下AngularJS写的todomvc吧。
项目的目录如下：
bower_components里放了两个文件夹，其中angular文件夹是用来一如angular.js文件的，todomvc-common文件夹里的放入了所有todo项目统一的css\js(只是用来生成左侧内容的，与项目无关)和图片。
js文件夹是大头，里面放了相应的controller(控制器)\directive(指令)\service(服务)和app.js。
test文件夹里放的是测试用的代码，不分析。
index.html是项目的view页面。
先来看一下app.js
复制代码 代码如下:
/*global angular */
/*jshint unused:false */
'use strict';
/**
* The main TodoMVC app module
*
* @type {angular.Module}
*/
var todomvc = angular.module('todomvc', []);
就是定义了一个模块todomvc
再看一下services下的todoStorage.js
复制代码 代码如下:
/*global todomvc */
'use strict';
/**
* Services that persists and retrieves TODOs from localStorage
*/
todomvc.factory('todoStorage', function () {
// todos JSON字符串存储的唯一标识
var STORAGE_ID = 'todos-angularjs';
return {
// 从localStorage中取出todos，并解析成JSON对象
get: function () {
return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
},
// 将todos对象转化成JSON字符串，并存入localStorage
put: function (todos) {
localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
}
};
});
使用factory方法创建了todoStorage的service方法，这个service方法的本质就是返回了两个方法get和put，两者都是用了JSON2和HTML5的特性。get将todos的内容从localStorage中取出，并解析成JSON，put将todos转化成JSON字符串，并存储到localStorage中。
再看一下directives下面的两个指令文件。
todoFocus.js
复制代码 代码如下:
/*global todomvc */
'use strict';
/**
* Directive that places focus on the element it is applied to when the expression it binds to evaluates to true
*/
todomvc.directive('todoFocus', function todoFocus($timeout) {
return function (scope, elem, attrs) {
// 为todoFocus属性的值添加监听
scope.$watch(attrs.todoFocus, function (newVal) {
if (newVal) {
$timeout(function () {
elem[0].focus();
}, 0, false);
}
});
};
});
返回function的参数中，elem就是包含该指令的元素的数组，attrs是元素的所有属性、属性名等组成的对象。
其中用到了两个AngularJS的方法
$watch(watchExpression, listener, objectEquality) 注册一个侦听器回调，每当watchExpression变化时，监听回调将被执行。
$timeout(fn[, delay][, invokeApply]) 当timeout的值达到时，执行fn函数。
todoFocus.js创建了todoFocus指令。当一个元素拥有todoFocus属性时，该指令会为该元素的todoFocus属性的值添加监听，如果todoFocus属性的值改变成true，就会执行$timeout(function () {elem[0].focus();}, 0, false);其中的延迟时间为0秒，所以会立即执行elem[0].focus()。
todoEscape.js
复制代码 代码如下: