一，路由的规划。
需要模拟的页面有三个：all,active,conplete.
首先，写好铺垫需要的各种东西，重要的组件的引用等——
这里我们会将index.html设为主页，将body.html加载到主页上——
1 <html lang="en" ng-app="myTodo"><head> 2 <meta charset="utf-8"> 3 <title>angularjs • TodoMVC</title> 4 <link rel="stylesheet" href="node_modules/todomvc-common/base.css"> 5 <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> 6 <style> 7 .pagination { 8 overflow: hidden; 9 padding: 20px; 10 } 11 .pagination ul li { 12 width: 60px; 13 height: 30px; 14 line-height: 30px; 15 border:1px solid black; 16 float: left; 17 list-style-type: none; 18 margin-right: 10px; 19 text-align: center; 20 } 21 </style> 22 </head> 23 <body> 24 <ng-view></ng-view> <!-- 路由区域，视图区域--> 25 26 27 <script src="node_modules/angular/angular.js"></script> 28 <script src="node_modules/angular-route/angular-route.js"></script> 29 <script src="js/app.js"></script> 30 31 32 </body> 33 </html>
主页的框架已经搭好，接下来是内容——body.html
1 <section id="todoapp"> 2 <header id="header"> 3 <h1>todos</h1> 4 <form style="margin:0" ng-submit="addTodo()"> 5 <input ng-model="newTodo" id="new-todo" placeholder="What needs to be done?" autofocus=""> 6 </form> 7 </header> 8 <section id="main" style="display: block;"> 9 <input ng-click="markAll(checked_statsus)" ng-model="checked_statsus" id="toggle-all" type="checkbox"> 10 <label for="toggle-all">Mark all as complete</label> 11 <ul id="todo-list"> 12 <li ng-repeat="item in itemList|filter:filterStatus|createtimeSort track by $index" ng-class="{completed: item.completed, editing: item.edit_status}"> 13 <div class="view"> 14 <input class="toggle" type="checkbox" ng-model="item.completed"> 15 <label ng-dblclick="editTodo(item)">{{item.title}}</label> 16 <button class="destroy" ng-click="remove(item)"></button> 17 </div> 18 <form ng-submit="saveEdit(item)"> 19 <input todo-focus="item.edit_status" class="edit" ng-blur="saveEdit(item)" ng-model="item.title"> 20 </form> 21 </li> 22 </ul> 23 <div class="pagination"> 24 <ul> 25 <li ng-click="prevPage()">prevPage</li> 26 <li ng-click="setPage(index)" ng-repeat="index in pagelist()">{{index + 1}}</li> 27 <li ng-click="nextPage()">nextPage</li> 28 </ul> 29 </div> 30 </section> 31 <footer id="footer" style="display: block;"> 32 <span id="todo-count"><strong>{{remainCount}}</strong> items left</span> 33 <ul id="filters"> 34 <li> 35 <a ng-class="{selected: routName == 'all'}" href="#/all">All</a> 36 </li> 37 <li> 38 <a ng-class="{selected: routName == 'active'}" href="#/active">Active</a> 39 </li> 40 <li> 41 <a ng-class="{selected: routName == 'completed'}" href="#/completed">Completed</a> 42 </li> 43 </ul> 44 <button id="clear-completed" ng-click="clearCompleted()">Clear completed</button> 45 </footer> 46 </section>
因为要被加载到index上面，所以这个html中只有body部分的代码就够了。基本框架如上所示，其中的方法需要讲解一下——
第4行——ng-submit="addTodo()"
当这个表单被提交的时候会触发这个方法，方法是用来将内容记录下来的。
第5行——
<input ng-model="newTodo" id="new-todo" placeholder="What needs to be done?" autofocus="">
一个input组件，设定了默认文字和自动获取光标
第9行——
<input ng-click="markAll(checked_statsus)" ng-model="checked_statsus" id="toggle-all" type="checkbox">
一个选项框，点击之后触发markAll(checked_statsus)方法，作用是全选所有的列表项。
11-22——
循环输出所需要的列表项。12行的前面是过滤，后面是动态加载css类。
24-28——
三个按钮，分别控制前一页后一页
32——<span id="todo-count"><strong>{{remainCount}}</strong> items left</span>
动态显示某个内容，这个remainCount是后台的一个变量
33-43 ——
三个超链接，用于进行跳转。前面的ng-class用于动态切换css，当内容变为ng-class="{selected: true'}"的时候会使得自身处于被选中的css下。后面的是【页内】跳转。
44——
里面的方法clearCompleted()用于清空表单内容。
至此，所有需要的方法，类，和注意事项已经书写清楚。css使用bookstap便足够，接下来就是app.js部分。