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

需要的知识

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

起步

1. 在github上给我们提供了一个todomvc的模板，我们可以clone下来，使用

2. 安装npm,安装git（具体安装不在描述，请自行百度）

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

  git clone https://github.com/tastejs/todomvc-app-template.git  cd todomvc-app-template/  npm install angular --save

1. 到此项目模板以构建完成

实现

1. 使用开发工具打开目录

2. 打开index.html,在的最下面添加angular.js的引用

1. 打开app.js将window对象换成angular对象，代码结构如下：

(function (angular) {    'use strict';})(angular);

1. 创建一个模块：

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

1. 创建一个Controller

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

1. 暴露text到页面

 $scope.text = "";

1. 暴露todos到页面

   $scope.todos = [       {           id: 1,           text: '学习',           completed: false       },       {           id: 2,           text: '睡觉',           completed: false       },       {           id: 3,           text: '敲代码',           completed: true       }   ];

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

               {{todo.text}}

1. 添加功能的实现：

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

1. 对todos做push操作添加元素，添加后将input文本框变为空，添加的元素需要三个属性：id，text，completed

2. 考虑id不能重复的问题使用Math.random()取随机数进行id的生成，具体实现代码如下：

   function getId() {       var id = Math.random();       for (var i = 0; i 

1. 删除功能的实现

暴露方法

  $scope.remove = function (id) {      for (var i = 0; i 

1. 清空功能的实现

暴露方法

 $scope.clear = function () {      var result = [];      for (var i = 0; i Clear completed

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

暴露方法

 $scope.existCompleted = function () {      for (var i = 0; i Clear completed

1. 添加编辑

暴露方法

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

1. 添加使用

 {{todo.text}}

1. 添加全部选中功能

暴露方法

       var now = true;       $scope.toggleAll = function () {           for (var i = 0; i 

1. 添加过滤功能

暴露方法

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

1. 添加使用

          1.               All          1.               Active          1.               Completed

1. 最后的优化

      **{{todos.length}}** item left

第一次优化-使用路由

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

     npm install angular-route --save

1. 在index.html 添加引用

1. 配置路由

     var myApp = angular.module('MyTodoMvc', ['ngRoute']);     myApp.config(['$routeProvider', function ($routeProvider) {         $routeProvider.when('/:stauts?', {             controller: 'MainController',             templateUrl: 'main_tmpl'         }).otherwise({redirectTo: '/'});     }]);

1. 配置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 = {};       }

第二次优化-分模块

1. 进行分模块使用

2. 将上面优化后的代码,进行分模块处理，即：controller模块、service模块。

3. 添加本地存储

在线展示

http://www.lovefoods.top/todomvc/indexV3.html

源码下载

https://github.com/guoshiqiufeng/todomvc-app

效果展示

关键字：angularjs

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！