app.js部分,首先是路由。这个之前讲过了,链接在这里——

http://www.cnblogs.com/thestudy/p/5661556.html

 var app = angular.module("myTodo", ['ngRoute']);
//路由的配置:
app.config(function($routeProvider) {
//我们在实现I want you项目,自己实现了一个路由,
//在这里angular.js帮我们实现了一个路由 var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
} var ohter_config = {
templateUrl: "other.html"
}
//如果路由没有匹配到hash,让它跳到body.html
//如果路由器配到的hash是index.html#/all 或者
//index.html#/comp index.html#/status
//假设路由器的匹配路径是 index.html#/!/allssssssssss
//会匹配失败,会通过otherwise,让它自动重定向到 index.html#/all
$routeProvider.
when("",routeconfig).
//status : 它对应我们页面的hash: all completed active
//路由规则的优先级按写法的顺序所决定的
when("/other", ohter_config).
when("/:status_id", routeconfig ).
otherwise( { redirectTo: "/all" });
});

上面一段就是路由部分。事实上,这个网页主要的部分就是路由和各种方法,路由解决了,剩下的就好办多了。

首先,我们编写过滤器。因为剩下的各种功能的方法组件等都是独立的,所以基本上书写顺序无所谓。但是为了安全起见(忘了写,漏了写就尴尬了),这里按照网页从上往下的执行顺序,碰到什么写什么。

过滤器的代码是这个——

 app.filter("createtimeSort", function(){
return function(list){
if(list) {
return list.sort(function(a, b){
return b.time - a.time;
});
}else {
return [];
} }
});
app.filter("offset", function(){
return function(list){
var res = []; }
})

过滤器使用的地方是这个——

<li ng-repeat="item in itemList|filter:filterStatus|createtimeSort track by $index" ....>

首先,第一个是遍历item in itemList,然后是第一个过滤器|filter:filterStatus,这个过滤器是写在后面的,通过判断filterStatus的对象来判断这个标签和内容是否应该隐藏——

 $scope.$on('$routeChangeSuccess', function () {
//使用这个实时监听功能,是有条件,
//必须要配置路由器对象,才可以监听路由器的变化。
console.log('hash值改变了');
console.log($routeParams.status_id);
if($routeParams.status_id === "all") {
$scope.filterStatus = {};
$scope.routName = "all";
}else if($routeParams.status_id === "active") {
$scope.filterStatus = {completed:false};
$scope.routName = "active";
}else {
$scope.routName = "completed";
$scope.filterStatus = {completed:true};
}
//该功能可以实时监听该模块作用域下hash值的改变
});

当路由为all的时候,没有反应,直接跳过。

当路由为active的时候,留下{completed:false},即complete属性为false的条目(这个属性后面介绍,所以才写在最下面的)

其余情况和上面一条相反,即留下{completed:true}的条目。

createtimeSort过滤器要求我们重新排列标签,【以保证刚输入的数据出现在最上面,然后依次向下】。

angular中要求条目不能有重复,如["aaa",’aaa","aaa"],如果有标签repeate这个,就会报错。因为angular不能对他们进行唯一性的判断(即,不好追踪),于是最后的track by就是判断用的,判断的依据是$index,即索引变量,这个是唯一的。

接下来的:

 function store(namespace, data) {
if(arguments.length > 1) {
localStorage.setItem(namespace, JSON.stringify(data));
}else {
var obj = localStorage.getItem(namespace);
return (obj && JSON.parse(obj)) || null
}
}

存储方法,中间有两个参数,第一个是参数的名字,第二个是值。参数会通过location方法存储起来。

 app.directive('todoFocus', function(){
var linkFunction_nice = function(scope, element, attr) {
//console.log(attr, element);
scope.$watch(attr.todoFocus, function(newval){
setTimeout(function(){
element[0].focus();
//延迟执行,否则无法聚焦
}, 100);
});
}; return {
restrict: "A", //暴露的一个元素,若是‘A’则是属性
link: linkFunction_nice
};
})

这个是自定义指令todoFocus,作用是当我们双击了条目的时候,会出现光标闪烁,表示可以编辑。这个使用在这里——

<input todo-focus="item.edit_status" class="edit" ng-blur="saveEdit(item)" ng-model="item.title">

当"item.edit_status" 处于可编辑状态的时候,它会显示,读取条目内容。当失去焦点的时候,对内容进行保存 ng-blur="saveEdit(item)"。

接下来,就是控制器的书写了——

 app.controller("myTodoCtrl", function($scope, $routeParams, $filter){

         $scope.itemList = store('mytodo') || itemList;//进行核心数据的绑定
$scope.routName = "all";
$scope.newTodo = '';
$scope.$watch("itemList", function(){
//$scope.remainCount = getRemainCount(itemList);// 计算未完成的任务数量
$scope.remainCount = $filter('filter')($scope.itemList, {
completed: false
}).length; // 计算未完成的任务数量 store('mytodo', $scope.itemList);
}, true);
$scope.saveEdit = function(obj){
console.log('失去焦点'); obj.edit_status = false;
}
$scope.remove = function(obj){
var index = $scope.itemList.indexOf(obj);
console.log('得到要删除对象的相应索引值:', index);
$scope.itemList.splice(index, 1); }
$scope.editTodo = function(todo){
console.log('进行双击操作');
todo.edit_status = true;
}
$scope.markAll = function(status){
//全部选中的功能
$scope.itemList.forEach(function(obj, index){
if(obj.completed !== status) {
obj.completed = status;
}
//全选的交替操作
});
}
$scope.clearCompleted = function(){
//清楚所有的完成状态任务
$scope.itemList = $filter('filter')($scope.itemList, {
completed: false
});
}
$scope.addTodo = function(){
//console.log($scope.newTodo);
//console.log($scope.newTodotext);
//增加未完成的任务操作
if(!$scope.newTodo.trim()) {
return;
}
var Coreobj = {
//已完成
completed: false,
title: $scope.newTodo,
time: new Date().getTime()
}
$scope.itemList.push(Coreobj);
$scope.newTodo = '';
} $scope.$on('$routeChangeSuccess', function () {
//使用这个实时监听功能,是有条件,
//必须要配置路由器对象,才可以监听路由器的变化。
console.log('hash值改变了');
console.log($routeParams.status_id);
if($routeParams.status_id === "all") {
$scope.filterStatus = {};
$scope.routName = "all";
}else if($routeParams.status_id === "active") {
$scope.filterStatus = {completed:false};
$scope.routName = "active";
}else {
$scope.routName = "completed";
$scope.filterStatus = {completed:true};
}
//该功能可以实时监听该模块作用域下hash值的改变
});
});

控制器分为两部分,数据部分和方法部分。

13行之前属于数据部分,主要进行各种定义和计算。如剩余任务个数计算

 $scope.$watch("itemList", function(){
7 //$scope.remainCount = getRemainCount(itemList);// 计算未完成的任务数量
8 $scope.remainCount = $filter('filter')($scope.itemList, {
9 completed: false
10 }).length;

这个剩余任务的计算,是通过监听条目的变化进行触发的,过滤器方法输入后,将completed等于false的剔除,得到的一组新的数组,然后这个新的数组的长度便是未完成的任务数了。

剩下的方法就不作介绍了,非常简单。

												

angular.js——小小记事本3的更多相关文章

  1. angular项目——小小记事本2

    一,路由的规划. 需要模拟的页面有三个:all,active,conplete. 首先,写好铺垫需要的各种东西,重要的组件的引用等—— 这里我们会将index.html设为主页,将body.html加 ...

  2. angular项目——小小记事本1

    这次的项目是制作一个记事本,有点类似于手机qq聊天信息. 内容:在一个input当中输入一行数据,之后提交,这个数据便会记录在下面.随着提交的增加,数据会以列表形式排列下来. 列表中,前面有一个组件, ...

  3. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  4. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  5. (翻译)Angular.js为什么如此火呢?

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  6. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  7. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  8. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  9. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

随机推荐

  1. 通过一个表的id同时查询多个表的数据

    'select c.字段名,x.字段名 as 改为新的显示名,x.字段名 from 表名1 b,表名2 c,表名3 x where b.字段id=' . $id . ' and b.`字段id`=c. ...

  2. 安装VMWare WorkStation 10 异常【 Failed to create the requested registry keyKey:Installer Error: 1021】

    下载了新的workstation 10,在安装的时候出现了异常Failed to create the requested registry keyKey:Installer Error: 1021. ...

  3. javaweb之session过期验证

    session过期判断的基本思想:用户登录成功后,将用户账号信息保存在session中,然后几乎每次执行命令都要经过过滤器,过滤器检查session中是否存在账号,若不存在, 则返回登录页面,反之正常 ...

  4. 集成shareSDK的微信、QQ API导致cocoaPods找不到类symbol问题的解决方法

    因为shareSDK的微信和QQ API都只支持32位的,而cocoaPods默认要支持64位的,所以如果在工程中导入这两个API会出问题. 解决方法我就不转载啦,原文在这里: http://blog ...

  5. Java开发工具

    总的来看Java的开发工具无非由两个部分构成,一个JDK一个是IDE,无论JDK是不可变的,IDE则是哪个用着舒服就用哪个. 1JDK 1.1简介 JDK是 Java 语言的软件开发工具包(SDK), ...

  6. ef code first 您没有所需权限

    在进行数据库更新操作时,update-database -force,反复提示没有改表或者没有所需权限,昨晚折腾了4个小时没有搞定,太晚了,今天Google了一下,这方面的错误,提到的都很少,在一篇文 ...

  7. 迅雷Vip账号共享器(持续更新)

    更新日期:2016.5.19 下载地址:https://pan.baidu.com/s/1jIya6My 软件界面: 软件界面: 下载地址:http://pan.baidu.com/s/1pJI47j ...

  8. Spring.net 学习IOC------准备

    在学习spring.net开始时,我们首先要下载spring.net所用到的类库: Common.Logging.dll(必要)Spring.Core.dll(必要)Spring.Data.dllSp ...

  9. Web多客户端单点登录

    一  数据库 除了用户表之外,新建一个外联表<用户票据表> fdUsTiUserID,fdUsTiType,fdUsTiTicket 分别对应用户ID,客户端类型(PC,mobile) 票 ...

  10. [转]cmd-bat批处理命令延时方法

    批处理延时启动的几个方法 方法一:ping 缺点:时间精度为1秒,不够精确 @echo off @ping 127.0.0.1 -n 6 >nul start gdh.txt 方法二:vbs s ...