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

时间 2019-12-05

标签 angular.js angular 学习之路使用实现 todomvc 栏目 AngularJS 繁體版

原文原文链接

须要的知识

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

起步

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

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

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

到此项目模板以构建完成angularjs

实现

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

建立一个模块：app

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

建立一个Controllerdom

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

暴露text到页面ide
```
$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的生成，具体实现代码以下：

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

须要的知识

起步

实现

第一次优化-使用路由

第二次优化-分模块

在线展现

源码下载

效果展现