05 2014 档案
摘要：本篇主要介绍angular中的表单验证:表单验证主要有以下一些内容:1. required指令: 相当于html5的required属性,验证不能为空2. ng-maxlength属性: 验证内容的长度最大值3. ng-minlength属性: 验证内容的长度最小值4. 表单名.$valid : 这...
阅读全文
摘要：本篇主要介绍angular使用指令修改DOM:使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用.与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令:var someModule = a...
阅读全文
摘要：本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器:下面,通过一个例子,来一步一步说明它的用法:我们要做一个邮箱应用,打开的时候显示的是邮件列表:然后点击邮件主题,可以查看该邮件的详细内容:点击返回列表,再回到列表页一. 创建index页面: 14.1路...
阅读全文
摘要：本篇主要介绍angular自定义的过滤器:直接看例子: 13.2过滤器 {{title_1 | titleCase: 1 }} {{title_2 | titleCase: 2 }}var myFilter = angular.module('MyFilter',[]);m...
阅读全文
摘要：本篇主要介绍过滤器的基本用法:过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作:{{expression | filter1:,参数1,参数2... | filter2: 参数1,参数2... }}expression : 表达式,也就是还没有经过过滤的变...
阅读全文
摘要：本篇介绍angular中的模块:module在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' 功能:什么是 '服务' 呢? 看一下下面这个例子:比如一个购物车的应用:function ItemsV...
阅读全文
摘要：如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择:1. 监测这些属性连接起来之后的值:$scope.$watch('objOne.a+objTwo.b+...', watchCallback);这个表达式可以无限长,但如果非常长的时候,应该把它们放在一个函数的返回值里,而不是...
阅读全文
摘要：同样的例子,还可以这样写: 11.3$watch监控数据变化 your shopping cart {{item.title}} {{item.price|currency}} {{item.price*item.quantity...
阅读全文
摘要：下面来看一个$watch的比较复杂的例子:还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子,给它添加一个计算总价和折扣的功能,如果总价超过500,则优惠10%:代码如下: 11.1$watch监控数据变化 y...
阅读全文
摘要：本篇主要介绍$watch的基本概念:$watch是所有控制器的$scope中内置的方法:$scope.$watch(watchObj,watchCallback,ifDeep)watchObj:需要被检测的对象,可以是以下任意一种:1. 某个数据,监测这个数据的值是否发生变化2. 一条angular...
阅读全文
摘要：本篇主要介绍控制器的$scope中的数据是如何被改变的:以下三种方法,都可以改变$scope中的number值:1. 表达式:点击改变值12. 回调函数:点击改变值2 $scope.computeNum = function(){ $scope.number = $scope.nu...
阅读全文
摘要：本篇主要介绍控制器:控制器在前面的例子中已经大量的用到,它的作用主要是:控制某块视图,通过$scope向这块视图提供数据,函数,并且监视需要被检测的部分,当发生变化时,做出相应的动作,从而起到控制该部分视图的作用为了保持控制器的最小化和可管理,应该为视图中的每个功能都创建一个控制器,比如,有一个菜单...
阅读全文
摘要：本篇只要介绍angular表达式:在之前的例子中,我们多半是直接把数据作为angular标识符的值,但其实可以使用表达式来做更多的事情:比如:{{number}}也可以是:{{number+10}} (将数据进行简单的运算)也可以是: {{someFun()/10}} (调用方法得到结果,同时经过简...
阅读全文
摘要：本篇主要介绍angular中图片的src和链接的href的处理:用到了以下两个属性:ng-src: 绑定了数据的路径表达式ng-href:绑定了数据的路径表达式例如: 7.1src和href 查看function SrcHref ($scope){ $scope.fav...
阅读全文
摘要：再来看一个选择li列表的例子:点击li中的任意项,被点击的li高亮显示: 6.3css类和样式 {{restaurant.name}}{{restaurant.food}}{{restaurant.price}} function Restauran...
阅读全文
摘要：在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名:我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框.错误框的类名是.err,警告框的类名是....
阅读全文
摘要：本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式从一个最基本的例子来看: 6.1css类和样式 提交 一个提交的按钮,点击以后就会被禁用,显示为灰色:给button添加类名submit-{{disable}},这样,disable的改变,就会引起but...
阅读全文
摘要：本篇介绍angular控制视图的显示和隐藏:通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏:ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素(其实只要用到其中...
阅读全文
摘要：每个迭代项中还有以下三个变量:$first: 判断是否是迭代第一项,如果是,得到true,如果不是,得到false$middle: 判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如果是,得到true,如果不是,得到false$last: 判断是否是迭代最后项,如果是,得到true,如...
阅读全文
摘要：视图的迭代和它的ng-repeat属性绑定的数据是实时绑定的,一旦数据发生了改变,视图也会立即更新迭代.还是刚才的那个例子,给它添加一个添加数据按钮和一个删除数据按钮. 4.1.迭代 {{$index+1}}{{student.name}}{{student.sc...
阅读全文
摘要：本篇介绍angular中元素的迭代: 4.1.迭代 {{$index+1}}{{student.name}}{{student.score}} function StudentList ($scope){ $scope.students = [{"...
阅读全文
摘要：这篇主要讲解非入侵式javascript.在传统的前端开发中,把js写在html中,称为入侵式的javascript:这种做法由于没有把视图和行为分离,而且不易于维护管理,所以已经被淘汰掉.但是,angular通过改进,很好的解决了这个问题.称为声明式事件处理器. 3.1.非入侵式js ...
阅读全文
摘要：同样是上一个例子,我们要求并非实时的计算结果,而是等到用户确定自己已经输入完毕,然后进行计算: 2.3.4计算阶乘实例3 的阶乘结果是: {{factorial.result}} 计算 重置 ...
阅读全文
摘要：2.3.3计算阶乘实例2 的阶乘结果是: {{factorial.result}} 同样是这个例子:result的改变,本质上是由于number的改变,而不是input的value值改变,number的改变有可能是input的va...
阅读全文
摘要：2.3.2计算阶乘实例1 的阶乘结果是: {{factorial.result}} function Factorial ($scope) { $scope.factorial = {}; $scope.factori...
阅读全文
摘要：input元素的ng-model属性:用于将input的值和变量的值进行双向绑定 2.3.1input数据绑定 rabbit:{{checkRabbit}} dog:{{checkDog}} cat:{{checkCat...
阅读全文
摘要：绑定数据有两种方式: 2.2显示文本 {{text.name}} 1:ng-bind = "变量"2:{{变量}}ng-bind属性来绑定数据和{{}}来绑定数据,效果一致,但是如果有大量的数据,在数据还没有加载完成之前,如果使用{{}},用...
阅读全文
摘要：如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块.模块有助于把东西从全局命名空间中隔离.今天学习如何自定义创建模块: 2.1模块 {{text.message}} {{text.name}}...
阅读全文
