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,在的最下面添加angular.js的引用

• 打开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: '睡觉',
             completed: false
         },
         {
             id: 3,
             text: '敲代码',
             completed: true
         }
     ];

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

     
  
         
  
             
                 {{todo.text}}
                 
         
         
  
             
         
     

• 添加功能的实现：

  • 判断输入的文本是否为空，为空不做处理

  • 对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 = "";
      }; 
      
    
          
      
      

• 删除功能的实现

  • 暴露方法

      $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;
              }
          }
      };

  • 添加使用

• 清空功能的实现

  • 暴露方法

     $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;
      };

  • 添加使用

       Clear completed

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

  • 暴露方法

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

  • 添加使用

      Clear completed

• 添加编辑

  • 暴露方法

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

  • 添加使用

     {{todo.text}}
     
    
         
     

• 添加全部选中功能

  • 暴露方法

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

  • 添加使用

• 添加过滤功能

  • 暴露方法

      $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;
      };

  • 添加使用

          
    
          
    
              
    
                  All
              
              
    
                  Active
              
              
    
                  Completed
              
          

• 最后的优化

     
        {{todos.length}} item left
     

第一次优化-使用路由

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

       npm install angular-route --save

• 在index.html 添加引用

• 配置路由

       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

效果展示