一个小的to do list,界面如下
首先安装angular js，出现了无非安装到桌面的问题，安装到D盘了
npm install angular
文件结构：
index.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Template • TodoMVC</title> <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> </head> <body ng-app="todos" ng-controller="todosControl">//angular操纵 <section class="todoapp"> <header class="header"> <h1>todos</h1> <form ng-submit="add()"> <input class="new-todo" placeholder="What needs to be done?" autofocus ng-model="newTask"> </form> </header> <!-- This section should be hidden by default and shown when there are todos --> <section class="main"> <input class="toggle-all" type="checkbox" ng-click="toggleAll()"> <label for="toggle-all">Mark all as complete</label> <ul class="todo-list"> <!-- These are here just to show the structure of the list items --> <!-- List items should get the class `editing` when editing and `completed` when marked as completed --> <li ng-repeat="item in tasks | filter:flag" ng-class="{'editing':isEditing==item.id,'completed':item.completed}"> <div class="view"> <input class="toggle" type="checkbox" ng-model="item.completed"> <label ng-bind="item.name" ng-dblclick="edit(item.id)"></label> <button class="destroy" ng-click="remove(item.id)"></button> </div> <form ng-submit="save()"> <input class="edit" ng-model="item.name"> </form> </li> </ul> </section> <!-- This footer should hidden by default and shown when there are todos --> <footer class="footer"> <!-- This should be `0 items left` by default --> <span class="todo-count"><strong>{{activeNum()}}</strong> item left</span> <!-- Remove this if you don't implement routing --> <ul class="filters"> <li> <a class="selected" href="#/" ng-click="selectAll()">All</a> </li> <li> <a href="#/active" ng-click="selectActive()">Active</a> </li> <li> <a href="#/completed" ng-click="selectCompleted()">Completed</a> </li> </ul> <!-- Hidden if no completed items are left ↓ --> <button class="clear-completed" ng-click="clearAll()" ng-show="isShow()">Clear completed</button> </footer> </section> <footer class="info"> <p>Double-click to edit a todo</p> <!-- Remove the below line ↓ --> <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p> <!-- Change this out with your name and url ↓ --> <p>Created by <a href="http://todomvc.com">you</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> </footer> <!-- Scripts here. Don't remove ↓ --> <script src="js/angular.js"></script>//引入angular.js <script src="js/app.js"></script>//引入app.js </body> </html>
app.js:
(function (angular) { 'use strict'; // Your starting point. Enjoy the ride! //功能分析： //1.展示数据 //2.删除任务数据 //3.添加任务数据 //4.编辑任务数据 //5.切换任务完成的状态 //6.批量切换任务状态 //7.清除已完成的功能 //7.1 隐藏或显示清除按钮 //8.显示未完成的任务数 //9.切换不同状态任务的显示 //10：保存任务信息到本地存储 var app = angular.module('todos',[]); app.controller('todosControl',['$scope','$location','$window', function ($scope,$location,$window) { //编辑代码 //读取本地存储数据 var arr = $window.localStorage.getItem('todos'); var jsonArr = JSON.parse(arr||'[]'); $scope.storage= function () { var arr_arr = JSON.stringify($scope.tasks); $window.localStorage.setItem('todos',arr_arr); }; //功能1.展示数据 $scope.tasks=jsonArr; //功能2.删除任务数据 $scope.remove= function (id) { for(var i=$scope.tasks.length-1;i>=0;i--){ if($scope.tasks[i].id==id){ $scope.tasks.splice(i,1); $scope.storage(); return; } } //$scope.tasks.splice(id,1) }; //功能3.添加任务数据 $scope.add= function () { //不允许输入内容为空 if(!$scope.newTask){ return; } //定义一个变量id记录当前新任务的id var id; if($scope.tasks.length<=0){ //如果任务集合为空，新任务id=0； id=0; }else{ //如果任务集合不为空，新任务id=最后一个任务的id+1 id = $scope.tasks[$scope.tasks.length-1].id+1; } $scope.tasks.push({name:$scope.newTask,completed:false,id:id}); $scope.storage(); $scope.newTask=""; }; //功能4.编辑任务数据 $scope.isEditing=-1; $scope.edit= function (id) { $scope.isEditing=id; }; $scope.save= function () { $scope.isEditing=-1; }; //功能5.切换任务完成的状态(已完成) //功能6.批量切换任务状态 //就是要把所有的item的completed都变成true或者false var status = true; $scope.toggleAll= function () { for(var i=0;i<$scope.tasks.length;i++){ $scope.tasks[i].completed=status; } status = !status; }; //功能7.清除已完成的功能 $scope.clearAll= function () { for(var i=$scope.tasks.length-1;i>=0;i--){ if($scope.tasks[i].completed){ $scope.tasks.splice(i,1); } } }; $scope.isShow= function () { for(var i=$scope.tasks.length-1;i>=0;i--){ if($scope.tasks[i].completed){ return true; } } return false; }; //功能8.显示未完成的任务数 $scope.activeNum= function () { var count=0; for(var i=$scope.tasks.length-1;i>=0;i--){ if(!$scope.tasks[i].completed){ count++; } } return count; }; //功能9：切换不同状态任务的显示 //$scope.selectAll= function () { // $scope.flag={} //}; //$scope.selectActive= function () { // $scope.flag={completed:false} //}; //$scope.selectCompleted= function () { // $scope.flag={completed:true} //}; //可以通过监视锚点变化来改变任务显示状态 $scope.loca = $location; $scope.$watch('loca.url()', function (newValue,oldValue) { if(newValue=='/active'){ $scope.flag = {completed:false}; }else if(newValue=='/completed'){ $scope.flag = {completed:true}; }else{ $scope.flag={}; } }) //功能10 保存任务信息到本地存储 }]); })(angular);
好了to do list写好了，分析一下官网http://todomvc.com/的ToDoMVC:
文件结构：
controller(控制器)directive(指令)service(服务)和app.js