需要的知识
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
效果展示
