Angular 开发学习 03 – TodoMVC

为了更方便学习 Angular 的开发，我们需要一个简单但又足够复杂的项目作为演示项目。这个演示项目具有一定的规范需求，但又不至于越俎代庖，以至于把基本的技术要求淹没在复杂的业务中。 TodoMVC 正是这样一个合适的示例项目。

TodoMVC 是一个开源 JavaScript 项目框架。不同于一个项目或者一个开发库，TodoMVC 提供了一个应用程序的标准范本需求，要求使用各种不同的 MV* 框架实现这么一个 Todo 应用。TodoMVC 目的是通过使用各种不同的开发框架实现同一个应用，使我们能够清晰对比各个开发框架之间的区别。

虽然 TodoMVC 的目的是对比各个开发框架之间的区别，但它提供了一个足够清晰且准确的需求列表。我们可以通过实现这么一个项目，来学习 Angular 的开发。

TodoMVC 的完整需求如下（原文地址在 https://github.com/tastejs/todomvc/blob/master/app-spec.md ）：

没有 TODO 时

当没有 TODO 时，应当隐藏 #main 和 #footer 。

新 TODO

在应用顶部的输入框敲下回车，添加新的 TODO。当页面加载完毕时，这个 input 应该获得焦点，最好是使用 input 的属性 autofocus 。按下回车创建一个新的 TODO，将其追加到 TODO 列表末尾，然后清空输入框。记得要对 input 调用  .trim() 函数，然后在创建新的 TODO 之前检查非空。

将所有项目标记为已完成

checkbox 将所有 TODO 修改为与其自身相同的状态。记得在点击了“Clear completed”按钮之后，清空已选择的状态。在某个 TODO 完成或未完成时，“Mark all as complete”选择框的状态应该随之改变。例如，当所有 TODO 都标记为已完成时，这个选择框也应该被选中。

项目

一个 TODO 项目有三种可能的交互：

1. 点击选择框，将该 TODO 标记为已完成。这一步骤需要更新其 completed 属性的值，然后切换其父元素 <li> 的 completed 类
2. 双击 <label> 进入编辑模式，将 .editing 类添加到 <li>
3. 鼠标滑过 TODO 列表，显示移除按钮（ .destroy ）

编辑

进入编辑模式之后，因此其它组件，显示一个 input 元素，input 的默认值是当前编辑的 TODO 的内容。该 input 应该获得焦点（ .focus() ）。在失去焦点或者按下回车时，提交保存编辑的信息，同时移除 editing 类。记得要对 input 调用 .trim() 函数，然后检查是否非空。如果为空，则应该删除该 TODO。如果编辑时点击 ESC 键，则应该离开编辑模式，丢弃所做的任何修改。

计数器

以复数形式显示当前有效的 TODO。将数字放在 <strong> 标签中。同时需要正确显示 item 的复数形式： 0 items 、 1 item 、 2 items 。例如， 2 items left。

Clear completed 按钮

点击之后移除已完成的 TODO。如果没有已完成的 TODO，隐藏该按钮。

持久化

应用应该能够动态将 TODO 持久化保存到 localStorage。如果开发框架提供了持久化数据的方法（例如 Backbone.sync），直接使用框架提供的功能。否则，使用标准的 localStorage。尽可能使用 id 、 title 、 completed 保存每一个项目。记得使用如下 localStorage 的名字： todos-[framework] 。编辑模式不能被持久化保存。

路由

所有实现都应该有路由。如果框架支持路由，使用框架内建功能。否则，使用 /assets 文件夹中提供的 Flatiron Director 路由库。应该实现下面的路由： #/ （所有 – 默认）； #/active 和  #/completed （也可以使用 #!/ ）。当路由发生改变时，TODO 列表应该在模型层次过滤，然后在过滤结果的链接上添加 selected 类。在过滤结果中修改项目，应该同时更新。例如，在过滤结果 Active 中，项目被选中，则其应该被隐藏。记得在重新加载时要激活当前过滤结果。

了解到需求之后，我们就可以着手开始 TodoMVC 项目的开发。首先，我们使用之前介绍的 Angular CLI 生成一个开发框架：

ng new todomvc

之后，我们会在这个项目基础之上完成我们的应用。TodoMVC 的页面模板已经放到 gitee 的仓库里面，地址是： https://gitee.com/devbean/learning-angular-todomvc.git 。

使用 git clone 下来仓库

git clone https://gitee.com/devbean/learning-angular-todomvc.git

切换到 todomvc 分支：

git checkout todomvc

这个分支是 TodoMVC 的项目模板。今后在开发 TodoMVC 时，我们会从这里复制所需要的各种素材。

项目的各个阶段的代码，将会按照 git 仓库的不同 tag 保存，可以直接 checkout 对应的 tag，检查每个阶段的代码。

当基础工作准备完成之后，接下来进入正式的学习时间！