Click here!{{ message }}, []); ($scope) { () { $scope.user.name; 17 } 18 }); () { 20 return { (scope, element, attrs) { ].focus(); 23 } 24 }; 25 });

指令的使用可以很复杂，后续我们会更加深入，这里再举一个单独使用的例子：

, []); () { 11 return { , , } 16 });

指令的定义有很多参数，可以指定该指令作为属性还是作为标签，这个我们后续再深入了解。

感觉过滤器是参考的smarty的语法，一般而言是用作显示的增强，angular本身也提供了很多内置过滤器，比如：

{{ "BBBB" | lowercase }} // bbbb

感觉比较有用的是日期操作过滤器：

{{ 1427345339072 | date:'yyyy' }} // 2015 {{ 1427345339072 |date:'MM' }} // 03 {{ 1427345339072 | date:'d' }} // 26，一月中第多少天 ......

数字格式化：

{{12.13534|number:2}} // 12.14 四舍五入保留两位小数 {{10000000|number}} // 10,000,000

当然，我们可以使用自定义过滤器，比如这里我想对超出某一区间的数字加...

{{ message |myFilter }}, []); ($scope) { ; 14 }); () { (input, param) { } 20 });

具备了以上知识，我们尝试进入To都MVC看看

参考：

我们由最新的TodoMVC下载代码：，首先查看js引用情况：

除了angular本体文件外，还多了个angular的扩展，做单页应用的路由功能的，这个路由代码量不大，使用和Backbone的路由比较类似；app.js为入口文件，配置路由的地方；余下是控制器文件文件以及一个localstorage的操作服务，余下就是指令了。

代码首先定义了一个模块作为本次程序的命名空间：

1 angular.module('todomvc', ['ngRoute'])

ngRoute为其依赖项，可以从route的定义看出：

1 var ngRouteModule = angular.module('ngRoute', ['ng']). 2 provider('$route', $RouteProvider), 3 $routeMinErr = angular.$$minErr('ngRoute');

这里来看看其router的配置，以及index.html的写法：

AngularJS • TodoMVCCredits:

1 var routeConfig = { 2 controller: 'TodoCtrl', 3 templateUrl: 'todomvc-index.html', 4 resolve: { 5 store: function (todoStorage) { todoStorage.then(function (module) { module; 10 }); 11 } 12 } 13 }; 14 15 $routeProvider 16 .when('http://www.cnblogs.com/', routeConfig) 17 .when('/:status', routeConfig) 18 .otherwise({ 19 redirectTo: 'http://www.cnblogs.com/' 20 });

这个代码现在基本看不懂，大概意思应该就是根据路由执行config中的逻辑，将模板展示在页面上，其中index.html有一段代码应该是用于替换模板的：

我们先抛开那段看不懂的，直奔主流程，目光聚焦到控制器controller：

1 angular.module('todomvc') 2 .controller('TodoCtrl', function TodoCtrl($scope, $routeParams, $filter, store) { 3 'use strict'; 4 5 var todos = $scope.todos = store.todos; 6 7 $scope.newTodo = ''; 8 $scope.editedTodo = null; 9 10 $scope.$watch('todos', function () { 11 $scope.remainingCount = $filter('filter')(todos, { completed: false }).length; 12 $scope.completedCount = todos.length - $scope.remainingCount; 13 $scope.allChecked = !$scope.remainingCount; 14 }, true); 15 16 // Monitor the current route for changes and adjust the filter accordingly. 17 $scope.$on('$routeChangeSuccess', function () { 18 var status = $scope.status = $routeParams.status || ''; 19 $scope.statusFilter = (status === 'active') ? 20 { completed: false } : (status === 'completed') ? 21 { completed: true } : {}; 22 }); 23 24 $scope.addTodo = function () { 25 var newTodo = { 26 title: $scope.newTodo.trim(), 27 completed: false 28 }; 29 30 if (!newTodo.title) { 31 return; 32 } 33 34 $scope.saving = true; 35 store.insert(newTodo) 36 .then(function success() { 37 $scope.newTodo = ''; 38 }) 39 .finally(function () { 40 $scope.saving = false; 41 }); 42 }; 43 44 $scope.editTodo = function (todo) { 45 $scope.editedTodo = todo; 46 // Clone the original todo to restore it on demand. 47 $scope.originalTodo = angular.extend({}, todo); 48 }; 49 50 $scope.saveEdits = function (todo, event) { 51 // Blur events are automatically triggered after the form submit event. 52 // This does some unfortunate logic handling to prevent saving twice. 53 if (event === 'blur' && $scope.saveEvent === 'submit') { 54 $scope.saveEvent = null; 55 return; 56 } 57 58 $scope.saveEvent = event; 59 60 if ($scope.reverted) { 61 // Todo edits were reverted-- don't save. 62 $scope.reverted = null; 63 return; 64 } 65 66 todo.title = todo.title.trim(); 67 68 if (todo.title === $scope.originalTodo.title) { 69 $scope.editedTodo = null; 70 return; 71 } 72 73 store[todo.title ? 'put' : 'delete'](todo) 74 .then(function success() {}, function error() { 75 todo.title = $scope.originalTodo.title; 76 }) 77 .finally(function () { 78 $scope.editedTodo = null; 79 }); 80 }; 81 82 $scope.revertEdits = function (todo) { 83 todos[todos.indexOf(todo)] = $scope.originalTodo; 84 $scope.editedTodo = null; 85 $scope.originalTodo = null; 86 $scope.reverted = true; 87 }; 88 89 $scope.removeTodo = function (todo) { 90 store.delete(todo); 91 }; 92 93 $scope.saveTodo = function (todo) { 94 store.put(todo); 95 }; 96 97 $scope.toggleCompleted = function (todo, completed) { 98 if (angular.isDefined(completed)) { 99 todo.completed = completed; 100 } 101 store.put(todo, todos.indexOf(todo)) 102 .then(function success() {}, function error() { 103 todo.completed = !todo.completed; 104 }); 105 }; 106 107 $scope.clearCompletedTodos = function () { 108 store.clearCompleted(); 109 }; 110 111 $scope.markAll = function (completed) { 112 todos.forEach(function (todo) { 113 if (todo.completed !== completed) { 114 $scope.toggleCompleted(todo, completed); 115 } 116 }); 117 }; 118 });

这段代码130行不到，让我体会到了深深的神奇，首先我们在app中返回了读取到localstorage的对象：