TodoMvc

使用 AngularJS 完成 TodoMVC 案例。

http://todomvc.com/

需求分析

结构搭建

模板地址：https://github.com/tastejs/todomvc-app-template

• 项目文件结构整理
• 初始化模块和控制器

功能开发

• 根据页面抽象数据模型
• 列表渲染
  • ng-repeat
• 任务完成状态切换
  • ng-class
• 添加任务
• 删除任务
• 显示未完成任务数量
• 点击清除所有已完成任务
• 点击显示所有任务
• 点击显示未完成任务
• 点击显示已完成任务
• 全选切换所有任务的完成状态
• 编辑任务

ng调试

SimpleExtManager Chrome 用来管理插件的插件

• 给 window 暴露 $scope
• 使用 Chrome 插件 Angular Batarang
  • 通过 Chrome 应用程序商店搜索该插件名称，然后安装
  • 以http协议访问你的要调试的项目
  • 调试之前要记得启用该插件
  • 打开控制台