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的更多相关文章

  1. AngularJS的学习--TodoMVC的分析

    最近一段时间一直在看AngularJS,趁着一点时间总结一下. 官网地址:http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础,是官方Tutorial ...

  2. Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

  3. 看AngularJS

    最近一段时间一直在看AngularJS,趁着一点时间总结一下. 官网地址:http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础,是官方Tutorial ...

  4. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  5. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views

    这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview ...

  6. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一

    Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...

  7. Django+Tastypie作后端，RequireJS+Backbone作前端的TodoMVC

    一.配置好环境 接着前一篇的例子,顺带测试一下已下载下来example里面的backbone_require的例子 注意:直接本地用backbone.localStorage插件运行TodoMVC会报 ...

  8. Django+Tastypie作后端，Backbone作前端的TodoMVC

    TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...

  9. 以todomvc为例分析knockout、backbone和angularjs

    一.整体结构 项目github地址https://github.com/tastejs/todomvc/ 排除通用的css样式文件和引用的js库文件,仅看html和js 1.1 knockoutjs版 ...

  10. 用KnockoutJS实现ToDoMVC代码分析

    体验地址 Knockout 版todo web app在线体验 http://todomvc.com/examples/knockoutjs/ 源码地址 项目源码地址,此地址包含了各种JS框架实现的t ...

随机推荐

  1. idea tomcat热部署 Error running 'Tomcat 7': Unable to open debugger port (127.0.0.1:3622): java.net.SocketExcepti

    2018/5/6  经过测试,发现只需要修改 http port 为 8081即可,JMX port 不用改 默认是 1099 今天在进 tomcat 的 debug 模式时报了此异常, tomcat ...

  2. DNS DHCP 路由 FTP

    第1章 网络基础 1.1 IP地址分类 IP地址的类别-按IP地址数值范围划分 IP地址的类别-按IP地址用途分类 IP地址的类别-按网络通信方式划分 1.2 局域网上网原理过程 DHCP原理过程详情 ...

  3. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

  4. nodejs 不支持 typescript （...paramName:any[]）剩余参数。变相支持方式。

    node es6 变相实现支持ts的剩余参数实现方式 //.ts method assign(to: any, options?: AssignOptions, ...forms: any[]){} ...

  5. Mysql试题集锦

    1.一张表,里面有 ID 自增主键,当 insert 了 17 条记录之后,删除了第 15,16,17 条记录,再把 Mysql 重启,再 insert 一条记录,这条记录的 ID 是 18 还是 1 ...

  6. centos安装及Xshell连接配置

    一.百度下载并安装VMware 二.下载centos 打开https://www.centos.org,点击“get centos now”,点击“DVD ISO”下载(也可以下滑点击“more do ...

  7. ES6的promise函数用法讲解

    总结:Promise函数的出现极大的解决了Js中的异步调用代码逻辑编写太过复杂的问题,Promise对象让异步调用函数的流程显得更加的优雅,也更容易编写. 举例: 1. 异步调用: 假设现在我的一个页 ...

  8. Linux命令对应的英文及整体学习法

    linux命令 注意一下内容收集与互联网,如果觉得有版权问题,请联系. 用Linux命令的时候,如果熟悉对应英文的含义,更有助于理解相应的命令.man: Manual 意思是手册,可以用这个命令查询其 ...

  9. windows上的mysql配置过程

    个人电脑的mysql配置,记录下来留作备忘 1. 首先去官网下载最新的mysql安装包,我下的是5.7.25,地址是 https://dev.mysql.com/downloads/windows/ ...

  10. 我对BP网络的简单的理解

    最近在学习tf的神经网络算法,十多年没有学习过数学了,本来高中数学的基础,已经彻底还给数学老师了.所以我把各种函数.公式和推导当做黑盒子来用,理解他们能做到什么效果,至于他们是如何做到的,暂时不去深究 ...