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

上一篇: 20 个有用的 Angular.js 工具下一篇:angular 2/4 把常用动画效果封装...

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

发布时间：2019-07-01 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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的引用

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" " title="" data-original-title="复制">
      
      
 <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: '睡觉',
           completed: false
       },
       {
           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的生成，具体实现代码如下：

      
      
      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 = "";
  }; 
  
      
  
  " title="" data-original-title="复制">
      
      
   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
效果展示


@H_896_1264@