1 $scope.$watch('todos', function () { 2 $scope.remainingCount = $filter('filter')(todos, { completed: false }).length; 3 $scope.completedCount = todos.length - $scope.remainingCount; 4 $scope.allChecked = !$scope.remainingCount; 5 }, true);

然后我们将关注点放在新增项目上：

1 $scope.addTodo = function () { 2 var newTodo = { 3 title: $scope.newTodo.trim(), 4 completed: false 5 }; (!newTodo.title) { 8 return; 9 } 10 11 $scope.saving = true; 12 store.insert(newTodo) 13 .then(function success() { 14 $scope.newTodo = ''; 15 }) 16 .finally(function () { 17 $scope.saving = false; 18 }); 19 };

View上的调用点是：

todos

首先这段代码中有一个autofocus的指令，没有什么卵用：

1 angular.module('todomvc') 2 .directive('todoFocus', function todoFocus($timeout) { 3 'use strict'; (scope, elem, attrs) { 6 scope.$watch(attrs.todoFocus, function (newVal) { 7 if (newVal) { 8 $timeout(function () { 9 elem[0].focus(); 10 }, 0, false); 11 } 12 }); 13 }; 14 });

可以看到model直接绑定到了该文本框上，所以addTodo方法可以直接根据$scope获取文本框的属性，完了调用单例store提供的静态方法存储数据，saving参数可以暂时将文本框变成不可编辑状态，而后todo数据更新，会自动引发View变化，于是流程结束！！！

我们如果将$scope放到全局上对其数据造成变化：

window.sss = $scope; //控制台中造成变化 sss.todos.pop()

每次返回操作视图时候，该变化会马上反应到View上，于是我发现了以下不同：

① 因为所有与业务相关的数据全部做了双向绑定，我根本没有必要由dom获取数据了，我自然而然的到$scope中获取数据，不知道为什么，这个特性让我有点愉悦！

② 我要做的事情其实就是约定好数据对象，然后将该对象放到要用到的所有视图上即可，每次内存中数据变化Dom会同步更新

于是通过以上两点，我似乎得到了一个惊人的结论：

似乎我一旦配置好ng-model后，我要做的事情仅仅是操作$scope上的数据！！！

因为，前端要做的事情只不过是正确的展示服务器端的数据，每次DOM事件造成的改变也往往是数据引起的，如果我们能做到数据变化自动更新到DOM变化的话，那么DOM操作的必要似乎没有了，而angular干的事情正是如此！！！

到此为止，TodoMVC的代码我虽然没有完全看懂，但是他带给我的震撼是全方位的，之前使用MVC类框架可以规范数据到DOM的操作，很大程度上解除DOM和JavaScript的耦合关系，而angular似乎完全抛开了业务数据导致的DOM变化操作！！！

我们现在团队有一mis后台系统，我在考虑是否要把它接过来，使用angular+bootstrap重构，可能别有一番风味吧！

最后，今天初步调研了一下angularJS，就已经感受到他的魅力了，后面时间需要将之用于实践，并且对其设计思想作深入研究！！！