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

前端之家收集整理的这篇文章主要介绍了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

效果展示




原文链接:https://www.f2er.com/angularjs/149303.html

猜你在找的Angularjs相关文章