用angular.js实现todomvc - Zikzin/Angular.js-study GitHub Wiki

一、下载

• github模板下载：todomvc-template 官方提供的一个模板，有很多技术栈的实现。
• todomvc.com 官网

二、使用

• 先下载依赖项： 模板根目录——shift+右键打开命令行——npm install
• 下载angular：npm install angular --save
• （或者在sublime里右键项目打开命令行安装）

三、实现（分析数据模型后）

准备：

• 1、引入ng包，可以删掉 base.js 和 base.css（因为与主体todo无关）
• 2、app.js：
  • window对象改为angular对象，因angular里我们不需要dom操作。

实现：

• 1、创建一个模块用于管理整个应用（第二个参数一定要传，即使模块依赖为空）（module）

• 2、在html的body上应用模块 ng-app="模块名称"

• 3、创建一个控制器，用于和界面暴露(交互)数据 （controller）

  • 第一个参数：控制器名称；第二个参数：控制器的执行函数，用数组的形式，是因为这个函数需要注入固定的参数$scope，代码一压缩可以会出现问题。并且在数组前加上$scope的字符串。。这个时候函数里的参数起任何名都不会有影响了。
  • 这里需要暴露的数据是数组形式的，为方便列表操作，我们都给数据加上id，并且为避免id重复，我们用随机数。但随机数还是会有重复的时候，我们可以用小数来给id。

• 4、完成控制器中对视图的数据暴露操作

  • 在页面使用 ng-controller="控制器名称"（考虑需要控制器的范围：todoapp上）
  • input上绑定ng-model，因为暴露了个input（value值我们一般用ng-model来绑定、）

• 5、界面绑定：绑定基本列表以及footer

• 6、暴露行为（处理事件）