需要的知识
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 = {};
}
第二次优化-分模块
在线展示
http://www.lovefoods.top/todomvc/indexV3.html
源码下载
https://github.com/guoshiqiufeng/todomvc-app
效果展示
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
