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 ...
随机推荐
- SQL Server Management Studio 键盘快捷键
光标移动键盘快捷键 操作 SQL Server 2012 SQL Server 2008 R2 左移光标 向左键 向左键 右移光标 向右键 向右键 上移光标 向上键 向上键 下移光标 向下键 向下键 ...
- TPO-23 C2 Advice on choosing courses
第 1 段 1.Listen to a conversation between a student and his English professor. 请听一段学生与他的英文教授的对话. 第 2 ...
- node.js主从分布式爬虫
前言 前文介绍过用Python写爬虫,但是当任务多的时候就比较慢, 这是由于Python自带的http库urllib2发起的http请求是阻塞式的,这意味着如果采用单线程模型,那么整个进程的大部分时间 ...
- Linux系统下搭建FTP/SFTP服务器
传输文件经常使用ftp和sftp服务器.Windows下有多种可视化工具,使用快捷.Linux经常需要自行搭建这两种服务器,当然搭建熟练的话,会更加快捷. 1.检查Linux系统是否安装了vsftp和 ...
- 学习笔记 | treap | splay
目录 前言 treap 它的基本操作 前言 不会数据结构选手深深地感受到了来自treap的恶意QwQ 在听的时候感觉自己听得听懂的??大概只是听懂了它的意思 代码是怎么写都感觉写不好╮(╯﹏╰)╭ 菜 ...
- 《The Mythical Man-Month（人月神话）》读后感（1）
临近考试周,这里我通过平时阅读的<人月神话>十九个章节和知乎.简书等网页中网友们对<人月神话>的读后感,对书中各个章节进行简单的总结,以下均为个人手打观点的思考与整合,仅供大家 ...
- Google hack语法
基础语法: 1.语法说明: inurl: 在url地址栏中显示的信息页面 intext: 显示在正文信息中的内容页面 site: 限制显示你某个域名的所有页面 filetype: 搜索文件的后缀或者扩 ...
- whoami,who,w命令详解
http://www.voidcn.com/blog/wszzdanm/article/p-6145895.html 命令功能:显示登录用户的信息 命令格式: 常用选项: 举例: w 显示已经登录的用 ...
- roadhog中如何拷贝文件
一:使用 public 目录 我们约定 public 目录下的文件会在 server 和 build 时被自动 copy 到输出目录(默认是 ./dist)下.所以可以在这里存放 favicon, i ...
- The serializable class XXX does not declare a static final serialVersionUID field of type long的警告
原文: http://blog.csdn.net/ultrakang/article/details/41820543