Angular.js学习之路一：使用angular.js实现todomvc

需要的知识

html、js、初步了解angularjs
熟悉npm、git的操作

起步

在github上给我们提供了一个todomvc的模板，我们可以clone下来，使用
安装npm,安装git（具体安装不在描述，请自行百度）

在本地新建文件夹todomvc，打开终端进入当前目录，执行下面的命令

git clone https://github.com/tastejs/todomvc-app-template.git
  cd todomvc-app-template/
  npm install
  npm uninstall todomvc-common --save
  npm install angular --save

到此项目模板以构建完成

实现

使用开发工具打开目录
打开index.html,在<body>的最下面添加angular.js的引用
```
<script src="node_modules/angular/angular.js"></script>
```
打开app.js将window对象换成angular对象，代码结构如下：
```
(function (angular) {
    'use strict';
})(angular);
```

创建一个模块：

var myApp = angular.module('MyTodoMvc',[]);

创建一个Controller

myApp.controller('MainController',['$scope',function ($scope) {
 };

暴露text到页面
```
$scope.text = "";
```

暴露todos到页面

$scope.todos = [
       {
           id: 1,text: '学习',completed: false
       },{
           id: 2,text: '睡觉',{
           id: 3,text: '敲代码',completed: true
       }
   ];

在index.html中找到显示数据的ul，留下一个ul，删除其余的ul，进行代码的改造

<li ng-repeat="todo in todos ">
       <div class="view">
           <input class="toggle" type="checkBox">
               <label>{{todo.text}}</label>
               <button class="destroy"></button>
       </div>
       <form>
           <input class="edit" ng-model="todo.text">
       </form>
   </li>

添加功能的实现：

判断输入的文本是否为空，为空不做处理
对todos做push操作添加元素，添加后将input文本框变为空，添加的元素需要三个属性：id，text，completed

考虑id不能重复的问题使用Math.random()取随机数进行id的生成，具体实现代码如下：

function getId() {
       var id = Math.random();
       for (var i = 0; i < $scope.todos.length; i++) {
           if ($scope.todos[i].id === id) {
               id = getId();
               break;
           }
       }
       return id;
   }
   $scope.add = function () {
      if (!$scope.text) {
          return;
      }
      $scope.todos.push({
          id: getId(),text: $scope.text,completed: false
      });
      $scope.text = "";
  }; 
  <form ng-submit="add()">
      <input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
  </form>

删除功能的实现

暴露方法

$scope.remove = function (id) {
      for (var i = 0; i < $scope.todos.length; i++) {
          if ($scope.todos[i].id === id) {
              $scope.todos.splice(i,1);
              break;
          }
      }
  };

添加使用

<button class="destroy" ng-click="remove(todo.id)"></button>

清空功能的实现

暴露方法

$scope.clear = function () {
      var result = [];
      for (var i = 0; i < $scope.todos.length; i++) {
          if (!$scope.todos[i].completed) {
              result.push($scope.todos[i]);
          }
      }
      $scope.todos = result;
  };

添加使用

<button class="clear-completed" ng-click="clear()">Clear completed</button>

对清空功能添加限制，在有选中的时候显示，没有的时候隐藏

暴露方法

$scope.existCompleted = function () {
      for (var i = 0; i < $scope.todos.length; i++) {
          if ($scope.todos[i].completed) {
              return true;
          }
      }
      return false;
  };

添加使用

<button class="clear-completed" ng-click="clear()" ng-show="existCompleted()">Clear completed</button>

添加编辑

暴露方法

$scope.currentEditingId = -1;
 $scope.editing = function (id) {
     $scope.currentEditingId = id;
 };
 $scope.save = function () {
     $scope.currentEditingId = -1;
 };

添加使用

<label ng-click="editing(todo.id)">{{todo.text}}</label>
 <form ng-submit="save()">
     <input class="edit" ng-model="todo.text">
 </form>

添加全部选中功能

暴露方法

var Now = true;
       $scope.toggleAll = function () {
           for (var i = 0; i < $scope.todos.length; i++) {
               $scope.todos[i].completed = Now;
           }
           Now = !Now;
       };

添加使用

<input class="toggle-all" type="checkBox" ng-click="toggleAll()">

添加过滤功能

暴露方法

$scope.selector = {};
  $scope.$location = $location;
  $scope.$watch('$location.path()',function (Now,old) {
      
      switch (Now) {
          case '/active':
              $scope.selector = {completed: false};
              break;
          case '/completed':
              $scope.selector = {completed: true};
              break;
          default:
              $scope.selector = {};
      }
  });
  $scope.equalCompare = function (source,target) {
      
      return source == target;
  };

添加使用

<li ng-repeat="todo in todos |filter:selector:equalCompare" ng-class="{completed:todo.completed,editing:todo.id===currentEditingId}"></li>
      <ul class="filters">
          <li>
              <a ng-class="{selected:selector.completed==undefined}" href="#/">All</a>
          </li>
          <li>
              <a ng-class="{selected:selector.completed==false}" href="#/active">Active</a>
          </li>
          <li>
              <a ng-class="{selected:selector.completed==true}" href="#/completed">Completed</a>
          </li>
      </ul>

最后的优化

<span class="todo-count"><strong>{{todos.length}}</strong> item left</span>

第一次优化-使用路由

使用angular的路由组件，在终端进入todomvc-app-template目录，输入以下命令：
```
npm install angular-route --save
```

在index.html 添加引用

<script src="node_modules/angular-route/angular-route.js"></script>

配置路由

var myApp = angular.module('MyTodoMvc',['ngRoute']);
     myApp.config(['$routeProvider',function ($routeProvider) {
         $routeProvider.when('/:stauts?',{
             controller: 'MainController',templateUrl: 'main_tmpl'
         }).otherwise({redirectTo: '/'});
     }]);

配置app.js

$scope.selector = {};

       var stauts = $routeParams.stauts;
       switch (stauts) {
           case 'active':
               $scope.selector = {completed: false};
               break;
           case 'completed':
               $scope.selector = {completed: true};
               break;
           default:
               $route.updateParams({stauts:''});
               $scope.selector = {};
       }

第二次优化-分模块

进行分模块使用
将上面优化后的代码,进行分模块处理，即：controller模块、service模块。
添加本地存储

在线展示

http://www.lovefoods.top/todomvc/indexV3.html

源码下载

https://github.com/guoshiqiufeng/todomvc-app

Angular.js学习之路一：使用angular.js实现todomvc

需要的知识

起步

实现

第一次优化-使用路由

第二次优化-分模块

在线展示

源码下载

效果展示

相关文章