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

随机推荐

SPOJ2713GSS4 - Can you answer these queries IV(线段树)
题意 Sol 讲过无数次了..很显然,一个$10^12$的数开方不超过$8$次后就会变为$1$ 因此直接暴力更改即可,维护一下这段区间是否被全改为了$1$ 双倍经验:https://www.luogu ...
【dp】奶牛家谱 Cow Pedigrees
令人窒息的奶牛题题目描述农民约翰准备购买一群新奶牛. 在这个新的奶牛群中, 每一个母亲奶牛都生两个小奶牛.这些奶牛间的关系可以用二叉树来表示.这些二叉树总共有N个节点(3 <= N < ...
重载&重写
重载:同一个类中,方法名相同,方法参数不同(参数个数.参数类型),返回类型无关,所以返回类型不能作为重载的区别依据. 重写:子父类中,子类的方法名.参数位置.参数个数.返回类型和父类一致,方法体不同 ...
mysql四:数据操作
一介绍 MySQL数据操作: DML ======================================================== 在MySQL管理软件中,可以通过SQL语句中的 ...
【转】JSP提交表单
设计表单页面,它是静态页面,使用HTML编写,而且使用了JavaScript脚本语言来验证填写表单数据,表单页面为form.htm,代码如下: <html><head>< ...
Gearman任务分配
Gearman 实现多数据库数据同步测试环境:windows(mysql)+ 虚拟机(ubuntu + mysql)+ PHP 1:gearman 的官方文档可以了解gearman,在ubuntu中 ...
python面试题之介绍一下Python中webbrowser的用法
所属网站分类: 面试经典 > python 作者:外星人入侵链接: http://www.pythonheidong.com/blog/article/13/ 来源:python黑洞网 www ...
命令java 找不到或无法加载主类
这个是由于用了package导致cmd下找不到class文件产生的错误,解决方案: 方法1.删除HelloWord.java源程序中的第一行package demo1:然后在cmd下正常使用javac ...
平衡树 - Luogu 1486 郁闷的出纳员
这么久没写平衡树了,再来一发... P1486 郁闷的出纳员题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的 ...
sql server备份
完全备份 declare @device varchar(255),@path varchar(255),@dbname varchar(255)set @dbname='MIS_TEMP'set @ ...

AngularJS实现TodoMVC

AngularJS实现TodoMVC的更多相关文章

随机推荐

热门专题