todomvc-app
1、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">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
</head>
<body ng-app="MyTodoMvc">
<section class="todoapp" ng-controller="MainController">
<header class="header">
<h1>todos</h1>
<form ng-submit="add()">
<input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
</form>
</header>
<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">
<li ng-repeat="todo in todos | filter: selector : equalCompare" ng-class="{completed:todo.completed,editing:todo.id===currentEditingId}" data-id="{{todo.id}}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editing(todo.id)">{{todo.text}}</label>
<button class="destroy" ng-click="remove(todo.id)"></button>
</div>
<form ng-submit="save()">
<input class="edit" ng-model="todo.text" ng-blur="save()">
</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>{{todos.length}}</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a ng-class="{selected:$location.path() == '/'}" href="#/">All</a>
</li>
<li>
<a ng-class="{selected:$location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected:$location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed" ng-click="clear()" ng-show="existCompleted()">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="node_modules/angular/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
2、app.js
(function(angular) {
'use strict';
// 1. 为应用程序创建一个模块，用来管理界面的结构
var myApp = angular.module('MyTodoMvc', []);
// 2. 注册一个主要的控制器（属于某个模块），用于往视图（view）中暴露数据
myApp.controller('MainController', ['$scope', '$location', function($scope, $location) {
// [1,2,3,4,5]
// 获取唯一ID
function getId() {
var id = Math.random(); // 1 2
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].id === id) {
id = getId();
break;
}
}
return id;
}
// 文本框需要一个模型，为了拿到文本输入的值
$scope.text = '';
// 任务列表也需要一个
// 每一个任务的结构 { id: 1, text: '学习', completed: true }
$scope.todos = [{
id: 0.123,
text: '学习',
completed: false
}, {
id: 0.22,
text: '睡觉',
completed: false
}, {
id: 0.232,
text: '打豆豆',
completed: true
}];
// 添加todo
$scope.add = function() {
if (!$scope.text) {
return;
}
$scope.todos.push({
// 自动增长？
id: getId(),
// 由于$scope.text是双向绑定的，add同时肯定可以同他拿到界面上的输入
text: $scope.text,
completed: false
});
// 清空文本框
$scope.text = '';
};
// 处理删除
$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;
}
}
// $scope.todos
};
// 清空已完成
$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;
};
// 是否有已经完成的
$scope.existCompleted = function() {
// 该函数一定要有返回值
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].completed) {
return true;
}
}
return false;
};
// 当前编辑哪个元素
$scope.currentEditingId = -1;
// -1代表一个肯定不存在的元素，默认没有任何被编辑
$scope.editing = function(id) {
$scope.currentEditingId = id;
};
$scope.save = function() {
$scope.currentEditingId = -1;
};
// $scope.checkall = false;
// $scope.$watch('checkall', function(now, old) {
// for (var i = 0; i < $scope.todos.length; i++) {
// $scope.todos[i].completed = now;
// }
// });
var now = true;
$scope.toggleAll = function() {
for (var i = 0; i < $scope.todos.length; i++) {
$scope.todos[i].completed = now;
}
now = !now;
}
// 状态筛选
$scope.selector = {}; // {} {completed:true} {completed:false}
// 点击事件的方式不合适，有DOM操作
// 让$scope也有一个指向$location的数据成员
$scope.$location = $location;
// watch只能监视属于$scope的成员
$scope.$watch('$location.path()', function(now, old) {
// 1. 拿到锚点值
// 这样写就要求执行环境必须要有window对象
// var hash = window.location.hash;
// console.log($location);
// console.log(now);
// 2. 根据锚地值对selector做变换
switch (now) {
case '/active':
$scope.selector = { completed: false };
break;
case '/completed':
$scope.selector = { completed: true };
break;
default:
$scope.selector = {};
break;
}
});
// 自定义比较函数, 默认filter过滤器使用的是模糊匹配
$scope.equalCompare = function(source, target) {
// console.log(source);
// console.log(target);
// return false;
return source === target;
};
}]);
})(angular);
todomvc-app的更多相关文章
- AngularJS的学习--TodoMVC的分析
最近一段时间一直在看AngularJS,趁着一点时间总结一下. 官网地址:http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础,是官方Tutorial ...
- Yeoman 官网教学案例：使用 Yeoman 构建 WebApp
STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...
- 看AngularJS
最近一段时间一直在看AngularJS,趁着一点时间总结一下. 官网地址:http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础,是官方Tutorial ...
- 摆脱DOM操作，从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views
这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一
Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...
- Django+Tastypie作后端，RequireJS+Backbone作前端的TodoMVC
一.配置好环境 接着前一篇的例子,顺带测试一下已下载下来example里面的backbone_require的例子 注意:直接本地用backbone.localStorage插件运行TodoMVC会报 ...
- Django+Tastypie作后端，Backbone作前端的TodoMVC
TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...
- 以todomvc为例分析knockout、backbone和angularjs
一.整体结构 项目github地址https://github.com/tastejs/todomvc/ 排除通用的css样式文件和引用的js库文件,仅看html和js 1.1 knockoutjs版 ...
- 用KnockoutJS实现ToDoMVC代码分析
体验地址 Knockout 版todo web app在线体验 http://todomvc.com/examples/knockoutjs/ 源码地址 项目源码地址,此地址包含了各种JS框架实现的t ...
随机推荐
- ATmega8仿真——键盘扫描的学习
1.按键的使用特点 按键的应用主要是在按键闭合时改变电路的电平,但是一般情况下按键的开关都是机械弹性触点开关,即利用触点的接触和分离来实现电路的通断,所以在按键按下和释放时往往会产生抖动干扰. 消除抖 ...
- bintray 在android3.2上传遇到的问题
1.报错信息如下: Gradle DSL method not found: 'google()'Possible causes: The project 'JustTest' may be usin ...
- Git 个人笔记
最近在看 Git ,顺便把这些常用命令记录下来,以备以后忘记能查看(未完): // 设置用户名和邮箱 使用global 表示这台主机上所有的Git仓库都会使用这个配置 也可以对某个仓库指定不 ...
- jmeter汉化
测试需要许多工具辅助工作,我们在使用这些工具之前需要对工具有一定的了解,第一步就是需要安装特定的软件. 因为工具基本上都是英文版的,所以菜鸟使用就面临汉化的问题,下面介绍几种汉化的办法: 一.万事不决 ...
- ASP.NET Core 接触&介绍
几年前从朋友口中了解到了微软出来一个ASP.NET Core ,当时还是1.0版本,聊天时还吐槽不好用之类的.前不久了解.NET Core 已经出3.0版本了,突然想试试,了解了解.ASP.NET C ...
- python自编程序实现——robert算子、sobel算子、Laplace算子进行图像边缘提取
实现思路: 1,将传进来的图片矩阵用算子进行卷积求和(卷积和取绝对值) 2,用新的矩阵(与原图一样大小)去接收每次的卷积和的值 3,卷积图片所有的像素点后,把新的矩阵数据类型转化为uint8 注意: ...
- Andorid Studio 模块化开发相关配置
Andorid Studio 模块化开发相关配置 下面以宿主APP模块和Uer_Module模块为例: 第一步:在项目根目录gradle.properties配置文件中添加如下代码 isNeedUse ...
- docker 一篇文章学习容器化
什么是镜像?什么是容器? 一句话回答:镜像是类,容器是实例 docker 基本操作命令: 删除所有container: docker rm $(docker ps -a -q) 删 ...
- MySQL两种引擎的比较
MyISAM,InnoDB主要区别: 1.MyISAM是非事物安全的,InnoDB是事物安全的. 事物安全的特点为更安全,遇到问题会自动恢复或从备份加事物日志回复,如果更新失败,你的所有改变都变回原来 ...
- Hyperledger Fabric 1.0.1至Hyperledger Fabric 1.0.5所升级的内容及修复的问题
基础更新 各版本每次迭代都会有一些基础更新内容,如文档修改覆盖.测试用例完善.用户体验改进及删除冗余无效代码等… 下面分类介绍的是一些版本迭代的重要更新内容,因个人实操和理解有限,部分更新并未明确,如 ...