AngularJS学习笔记之TodoMVC的分析
最近一段时间一直在看AngularJS，趁着一点时间总结一下。
官网地址：http://angularjs.org/
先推荐几个教程
1. AngularJS入门教程 比较基础，是官方Tutorial的翻译。
2. 七步从AngularJS菜鸟到专家 也比较基础，制作了一个在线音乐播放网站。
3. AngularJS开发指南 这个教程比较全面，但我感觉翻译的有些晦涩难懂。
看过这些教程后，觉得AngularJS也懂一点了，就想用它干点事，就分析一下AngularJS写的todomvc吧。
Todomvc官网地址：http://todomvc.com/
项目的目录如下：
bower_components里放了两个文件夹，其中angular文件夹是用来一如angular.js文件的，todomvc-common文件夹里的放入了所有todo项目统一的css\js(只是用来生成左侧内容的，与项目无关)和图片。
js文件夹是大头，里面放了相应的controller(控制器)\directive(指令)\service(服务)和app.js。
test文件夹里放的是测试用的代码，不分析。
index.html是项目的view页面。
先来看一下app.js
http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
<a href="http://ericbidelman.com">Eric Bidelman</a>,
<a href="http://jacobmumm.com">Jacob Mumm</a> and
<a href="http://igorminar.com">Igor Minar</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script>
<script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoEscape.js"></script>
</body>
</html>
首先是在最下面，引入相应的JS，这个就不多说了。
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script>
<script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoEscape.js"></script>
定义style[ng-cloak]，含有ng-cloak属性则不可见。
<style>[ng-cloak] { display: none; }</style>
来看添加todo的html，绑定的model为newTodo，submit的方法是todoCtrl.js中的addTodo()，会添加一条todo，点击Enter，默认触发提交事件，就触发了addTodo()方法，添加了一条todo到todos中。
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
再看展示todos的html
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEditing(todo)" ng-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
section使用ngShow方法根据todos的长度判断是否显示，加上ng-cloak属性是为了在刚开始时不要显示出AngularJS未处理的页面。可以去掉刷新试一试。
其中id为toggle-all的checkbox绑定到allChecked model上，点击触发markAll(allChecked)，将allChecked的值传入，标记所有的todos。
使用ngRepeat循环产生li标签，todo in todos | filter:statusFilter track by $index，循环todos，用statusFilter过滤，用$index追踪。ngClass绑定了两个class，{completed: todo.completed, editing: todo == editedTodo}，如果todo.completed为true，添加completed class，如果todo==editedTodo，则添加editing class。class为toggle的checkbox绑定到todo.completed。todo标题展示的label绑定了双击事件，双击触发editTodo(todo)，editTodo会将todo赋给editedTodo，然后会触发下面form中的todoFocus指令，这时候form中的input可见。按Esc就触发revertEditing(todo)，恢复到编辑前，按Enter或者失去焦点就触发doneEditing(todo) ，保存编辑后的todo。class为destroy的button绑定了click事件，点击触发removeTodo(todo)，删除掉该条todo。
最后看todos的统计信息展示的html
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
</footer>
ng-pluralize标签实现了当remainingCount个数为1时，显示 item left，否则显示 items left。
id为filters的ul标签中根据location.path()的内容不同，标记不同的a标签被选中。
id为clear-completed的button添加了点击事件，触发clearCompletedTodos()，清除掉所有已完成的todo。
今天的笔记就先到这里吧，都是些个人心得，希望小伙伴们能够喜欢。
«
»