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… 新的稳定解决方案列表持续增长,但你如何决定在海量的框架中选择哪个使用? 为了 ...

随机推荐

升级win10后电脑经常自动重启的问题
升级win10后用户体验度确实比win7强了很多,但是电脑无故的重启,让人无法接受,下面就介绍win10电脑自动重启问题的解决方案问题分析: 遇到这种情况主要是硬件与系统不兼容所致解决方案: 1, ...
Java传值分析
public class Example{String str=new String("good");char[] ch={'a','b','c'};public static v ...
SummerVocation_Learning--java的String 类
java中String属于java.lang的package包,是一个类.代表不可变的字符序列. String类的常见构造方法: String(String original),创建一个对象为orig ...
BZOJ2023: [Usaco2005 Nov]Ant Counting 数蚂蚁(dp)
题意题目描述的很清楚... 有一天,贝茜无聊地坐在蚂蚁洞前看蚂蚁们进进出出地搬运食物．很快贝茜发现有些蚂蚁长得几乎一模一样,于是她认为那些蚂蚁是兄弟,也就是说它们是同一个家族里的成员．她也发现整个 ...
Centos7 PHP的安装和配置
前面Nginx和httpd的安装都是为了支持PHP而弄的,然后这个目标就给了我一沉重的打击,等我慢慢道来,先来说说PHP的安装和配置吧. 一.PHP的安装 1.由于linux的yum源不存在php7. ...
thinkcmf5 iis+php重写配置
TP在本机运行非常好,谁想到服务器上后,连http://www.***.com/wap/login/index都404错误了, 中间的郁闷过程不表. 解决方案分两步: 第一步: 下载rewrite_2 ...
java的重写(Override) (2013-10-11-163 写的日志迁移
/* *说明方法的重写(又称方法的覆盖)子类并不想原封不动地继承父类的方法,而是想作一定的修改 */ package czbk.jxy.study; /** * @author Archon * @d ...
ubuntu下vim的简单配置
该文章只是进行符合自己习惯的最基本的配置,更加高级的配置请参考更加有含量的博文! 1.打开vim下的配置文件 sudo vim /etc/vim/vimrc 2.在这个文件中,会有这么一句:synta ...
Database returned an invalid datetime value. Are time zone definitions for your database installed?
在做文章归档的会后,打印结果时报了这个错误 ret = models.Article.objects.filter(user=user).annotate(month=TruncMonth('crea ...
POJ 3320 尺取法(基础题）
Jessica's Reading Problem Description Jessica's a very lovely girl wooed by lots of boys. Recently s ...

AngularJS实现TodoMVC

AngularJS实现TodoMVC的更多相关文章

随机推荐

热门专题