TodoMVC-Angular版本
丁兴德
简单介绍结构，路由定义状态，分为三个平级状态，all，active，completed。每个状态每次都会，重新渲染全部视图模板，并且每种状态的数据，改变在下次刷新状态时，会被初始化，每个状态调用的controller是同一个，这里的数据存储结构分为三层：
第一层：三种状态层面进行的数据更改的动态存储，这里使用localstorage。
第二层：每种状态里面，数据初始化的源数据，这里的数据做为在该种状态下增删改差的基础数据。
第三层：筛选层的数据是该种状态下，通过筛选第二层的数据得出来的，这里也是视图数据的获取地点。
这里 贴源码 ：
<!doctype html>
<html lang="en" ng-app="todo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<ui-view></ui-view>
<!-- Scripts here. Don't remove ↓ -->
<!--<script src="node_modules/todomvc-common/base.js"></script>
<script src="js/app.js"></script>-->
<!--<script src="node_modules/.3.2.1@jquery/dist/jquery.js"></script>-->
<script src="node_modules/.1.6.3@angular/angular.js"></script>
<script src="node_modules/.0.4.2@angular-ui-router/release/angular-ui-router.js"></script>
<script id="acts.tpl" type="text/ng-template">
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus
ng-model='inp_val'
ng-keyup="myKeyup($event)"
>
</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="top=!top" ng-init="top=true">
<ul class="todo-list" ng-if="top">
<li ng-repeat="todo in todos_copy" ng-class="{ 'completed': todo.done, 'editing': todo.edit }">
<div class="view">
<input type="checkbox" ng-model="todo.done" class="toggle">
<label ng-dblclick="db(todo)">{{todo.text}}</label>
<button class="destroy" ng-click="delet($index,todo)"></button>
</div>
<input autofocus ng-blur="two($event,$index,todo)"
ng-keyup="up($event,$index,todo)" class="edit" ng-model="todo.text">
</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>something is counted</strong></span>
<!-- Remove this if you don't implement routing -->
<!-- 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 -->
<ul class="filters">
<li ng-repeat="act in acts" ng-click="slet($index)">
<a ui-sref={{act.name}}
ng-class="{ 'selected': act.ok }"
ui-sref-active="selected">
{{act.name}}
</a>
<span>{{act.count()}}</span>
</li>
</ul>
<button class="clear-completed" ng-click="cancel()">Clear completed</button>
</footer>
</section>
</script>
<script>
var todo= angular.module('todo', ['ui.router']);
/*ui-router*/
todo.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
var allState = {
name: 'all',
url: '/',
templateUrl: 'acts.tpl',
controller:'TodoListCtrl'
};
var activeState = {
name: 'active',
url: '/active',
templateUrl: 'acts.tpl',
controller:'TodoListCtrl'
};
var completedState = {
name: 'completed',
url: '/completed',
templateUrl: 'acts.tpl',
controller:'TodoListCtrl'
};
$stateProvider.state(allState);
$stateProvider.state(activeState);
$stateProvider.state(completedState);
});
/*router-end*/
todo.controller('TodoListCtrl', ['$scope','$filter','$state',function($scope,$filter,$state){
/*这是每次实例化一次状态，todo源数据要从取localstorage里面取，因为每种状态会重新刷新一次todos初值*/
$scope.todos = angular.fromJson(localStorage.todos || '[]');
/*每当实例化的时候，执行*/
this.$onInit=function () {
var a=$scope.acts.find(function (item) {
console.log(item.name);
return item.name===$state.current.name
});
a.opt();
console.log(a)
};
/*监视每种状态下每次todos的改动*/
$scope.$watch(function () {
return $scope.todos
},function (n,o) {
console.log(n);
if (n === o) {
return;
}
$scope.todos = n;
localStorage.todos=angular.toJson(n);
var a=$scope.acts.find(function (item) {
console.log(item.name);
return item.name===$state.current.name
});
a.opt();
},true);
/*双击事件*/
$scope.db=function (todo) {
todo.edit = !todo.edit;
$scope.one=todo.text};
/*这里是选中时改变筛选按钮的样式*/
$scope.slet=function (index) {
$scope.acts.forEach(function (item, i) {
item.ok = i === index;
});
};
/*取消完成状态*/
$scope.cancel=function () {
$scope.todos.forEach(function (ele) {
if(ele.done){
ele.done=false
}
});
};
/*这里是acts部分*/
$scope.acts=[
{
name:'all',
opt:function () {
$scope.todos_copy=$scope.todos;
},
count:function () {
},
path:'/'
},
{
name:'active',
opt:function () {
$scope.remainingCount = $scope.todos.filter(function (p1) { return !p1.done});
$scope.todos_copy = $scope.remainingCount;
console.log($scope.remainingCount);
},
count:function () {
return $scope.todos.filter(function (p1) {
return !p1.done
}).length
},
path:'/active'
},
{
name:'completed',
opt:function () {
$scope.completedCount = $filter('filter')($scope.todos,{ done: true });
$scope.todos_copy=$scope.completedCount;
console.log('complated')
},
count:function () {
return $scope.todos.filter(function (p1) {
if (p1.done){
return p1
}}).length;
},
path:'/completed'
}
];
/*这是按键功能*/
$scope.up=function (e,index,todo) {
var keycode = window.event?e.keyCode:e.which;
if(keycode==13){
console.log(13);
$scope.todos[index].edit=!$scope.todos[index].edit;
}
if(keycode==27){
$scope.todos[index].edit=!$scope.todos[index].edit;
$scope.todos[index].text=$scope.one;
console.log($scope.one)
}
};
/*按回车引用todo添加功能*/
$scope.myKeyup = function(e){
//IE 编码包含在window.event.keyCode中，Firefox或Safari 包含在event.which中
var keycode = window.event?e.keyCode:e.which;
if(keycode==13){
$scope.addTodo();
}
};
/*这里是数组添加 push可以添加一个对象作为数组的一个元素*/
$scope.addTodo=function () {
console.log($scope.inp_val);
$scope.todos.push({
text: $scope.inp_val,
done:false
});
$scope.inp_val=''
};
/*这里是统计整个数组里面done=false的数量，这里的done跟input用ng-model双向绑定*/
$scope.remain=function () {
var i=0;
$scope.todos.forEach(function (ele) {
if(!ele.done){
i++
}
});
return i;
};
/*这是在数组中删掉当前todo，这里的todo实际是个索引*/
$scope.delet=function (index,todo) {
console.log(todo);
console.log(1);
//在todos数组中将当前todo删去
$scope.todos.splice(index,1);
console.log(index)
}
}]);
</script>
</body>
</html>
类似资料：