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: '睡觉',
               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

效果展示

image
image
image
image

阅读 2.4k

过世秋风
一个正在成长的程序猿
44 声望
1 粉丝
0 条评论
44 声望
1 粉丝
文章目录
宣传栏