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… 新的稳定解决方案列表持续增长,但你如何决定在海量的框架中选择哪个使用? 为了 ...
随机推荐
- 黑马基础阶段测试题：通过字符输入流读取info.txt中的所有内容，每次读取一行，将每一行的第一个文字截取出来并打印在控制台上。
package com.swift; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File ...
- 51nod——2478 小b接水（预处理 思维）
我本来想把每个谷都处理了,想了下觉得不好办.后来看其他人写的是处理每个位置,把每个位置可以接的水累加起来.整挺好. #include <bits/stdc++.h> using names ...
- mysql 5.7 编译安装脚本。
此脚本尽量运行在centos 服务器上面,用于编译安装mysql 5.7 将此脚本和相应的软件 都放到/usr/local/src 目录下面 由于不能上传附件 所以需要把cmake-3.9.6.ta ...
- 想成长为一名年薪50万+的实战型架构师？必掌握这7大实战技能经验--阿里mike
想成为一名架构师,但是架构师对应的技能,我应该掌握哪些啊?以及掌握的程度是什么样的?如何成为一名真正的实战性架构师? 我简要分为以下7点来谈谈,从技能的角度抛砖引玉,希望你对你架构师之路有一定的参考. ...
- 适合学习的QT开源项目-SerialTool
https://github.com/Skiars/SerialTool A cross platform Serial-Port/TCP/UDP debugging tool. SerialTool ...
- 一个人的旅行 HDU - 2066 （最短路）
一个人的旅行 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- HDU4616 树形DP+三次深搜
这题和之前那个HDU2616有着奇妙的异曲同工之处..都是要求某个点能够到达的最大权重的地方... 但是,这题加了个限制,要求最多只能够踩到C个陷阱,一单无路可走或者命用光了,就地开始清算总共得分之和 ...
- easyui的tree基本属性
1.cascadeCheck,级联 默认情况下,是true,级联的,就是选中一个子节点,父节点是半选中状态,子节点全选中之后,父节点就是选中状态.
- Django补充知识点——用户管理
内容概要 1.Form表单2.Ajax3.布局,Django母板4.序列化5.Ajax相关6.分页7.XSS攻击8.CSRF9.CBV.FBV 10.类中用装饰器的两种方法 11.上传文件 12.数据 ...
- Eclipse安装MAT插件
MAT(Memory Analyzer Tool) 是基于heap dumps来进行分析的,它的分析速度比jhat快,分析结果是图形界面显示,比java内置jhat的可读性更高 通过Eclipse市场 ...