AngularJS实现TodoMVC
一个小的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
AngularJS实现TodoMVC的更多相关文章
- AngularJS系统学习之Scope（作用域）
本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂, 也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...
- 摆脱DOM操作，从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- AngularJS的学习--TodoMVC的分析
最近一段时间一直在看AngularJS,趁着一点时间总结一下. 官网地址:http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础,是官方Tutorial ...
- 以todomvc为例分析knockout、backbone和angularjs
一.整体结构 项目github地址https://github.com/tastejs/todomvc/ 排除通用的css样式文件和引用的js库文件,仅看html和js 1.1 knockoutjs版 ...
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- AngularJS 中文资料+工具+库+Demo 大搜集
中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的 ...
- 看AngularJS
最近一段时间一直在看AngularJS,趁着一点时间总结一下. 官网地址:http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础,是官方Tutorial ...
- TodoMVC：帮助你选择一个MV*框架
开发者现在有很多的MV*框架选择来组织开发web应用程序.Backbone. Ember.AngularJS.Spine… 新的稳定解决方案列表持续增长,但你如何决定在海量的框架中选择哪个使用? 为了 ...
随机推荐
- “System.AccessViolationException”类型的未经处理的异常在 System.Data.dll 中发生 其他信息: 尝试读取或写入受保护的内存。这通常指示其他内存已损坏
用管理员身份运行CMD:netsh winsock reset就可以解决
- STL笔记(に)--vector容器
Vector 1.可变长的动态数组 2.需包含头文件#include<vector> (当然,如果用了万能头文件#include<bits/stdc++.h>则可忽略) 3.支 ...
- yum 安装percona mysql 5.7
Mysql5.7安装准备 1.基础信息: (1)可参考官方文档[https://www.percona.com/doc/percona-server/5.7/installation/yum_repo ...
- 【php】如何配置自主域名腾讯企业邮箱
腾讯企业邮配置 protocal ssl smtp port 465 host smtp.exmail.qq.com user email account passwd email passwd
- haystack(django的全文检索模块)
haystack haystack是django开源的全文搜索框架 全文检索:标题可以检索,内容也可以检索 支持solr ,elasticsearch,whoosh 1.注册app 在setting. ...
- Memory loss【记忆缺失】
Memory Loss Losing your ability to think and remember is pretty scary. We know the risk of dementia ...
- 安装 ubuntu 后,使用 sed 更换国内源
cd /etc/aptsed -i "s/archive.ubuntu.com/mirrors.aliyun.com/g" /etc/apt/sources.list也可以使用 1 ...
- POJ 3414 BFS 输出过程
Pots Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17456 Accepted: 7407 Special J ...
- hdu 5667
Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Su ...
- PowerShell批量启动/关闭Azure VM
备注:以下例子中出现的JohnsonWeb, JohnsonVm均是虚拟机的名称.在运行Powershell脚本之前,请导入您的订阅文件. 根据条件启动/关闭虚拟机,例如根据虚拟机名称,批量启动/关闭 ...