为您找到搜索结果：6311个
angular的uiRouter服务学习(1)
angular有内置的路由服务$route:angular--$routeAPI翻译 使用$route可以帮助实现路由的切换,视图的改变,但是这个内置的$route只包含了基本的功能,在很多场合下是不够用的.所以,需要学习使用uiRouter. 首先,在页面中链入'angular-ui-router.min.js',然后在模块中写入依赖:varmyapp=angular.module('myApp',['ui.router']); 然后就可以使用一个叫做$state的服务,使用$stateProvider来配置这个服务. $stateProvider和angualr内置的$routeProvider的用法类似,但是它是通过'状态'来管理路由的.在整个应用的界面和导航中,状态对应了页面中的一个位置(也就是ui-view)状态通过controller,template,view等属性,描述了它对应位置的视图展示和行为.状态之间通常有一些共同点,把这些共同点从模型中分解出来的最好办法就是通过状态继承.比如父/子状态(又名状态嵌套) ...
angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1).这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等.*注意,这里介绍的是基于angular-1.3.2版本的,低版本的$location可能会有问题. hashbang模式和historyapi创建单页应用首先,$location是用在单页应用里的...(废话,angular就是用在单页的)...所以,$location处理的是url改变,但是不刷新页面的情况.那么我们知道,不刷新页面但是请求ajax改变url,需要存入历史记录.这样的话,需要使用html5的historyapi,但是对于不支持historyapi的浏览器(也就是ie8,9吧,反正ie7angular本来就不支持,而且看了花瓣网,它在ie7,8,也没有使用单页,而是新开链接),则需要使用hashbang模式.什么叫hashbang模式?在网上查阅了很多也没有查到具体的说明.只能按照自己理解的来总结:比如一个url: http://localhost:801/$locatio...
angular指令中使用ngModelController
在这篇文章中 angular学习笔记(三十)-指令(10)-require和controller 说到了通过require属性和controller参数来让指令与指令之间互相交互.本篇主要介绍的是指令与ngModel指令的交互.也就是说,ngModel指令虽然是内置的,但它也有自己的controller属性,其它指令也可以通过require来得到ngModel指令的controller属性的实例来与ngModel指令进行交互.ngModelController用在什么场合呢?我们知道,ngModel提供了数据绑定,验证,样式更新,数据格式化,编译功能,但是它故意没有提供和逻辑相关的处理,比如视图的重新渲染和监听dom事件.这些和逻辑处理相关的dom,就应该使用ngModelController来进行数据绑定.ngModelController的方法和属性很多...无法一一列举,有些也很少用,这里会重点讲一下常用的几个(带有*的): 方法:*1.$render()这个方法会在视图需要被更新的时候调用.比如以下这些场景:$rollbackViewValue()...
angular中的表单数据自定义验证
之前说过了angular是如何给表单的数据进行基本的,常用的验证的:angular学习笔记(二十)-表单验证但是在实际工作中,这些验证是远远不够的,很多时候我们需要自定义一些验证规则,以及一些异步,需要向后台发送请求的验证.这篇文章就来讲解,如何自定义验证规则.同时,这篇文章还是angular指令中使用ngModelController中关于 $validators属性和 $asyncValidators和$pending属性的详细讲解.首先,需要自定义指令,设置require属性为'?^ngModel',在指令的link函数中通过第四个参数ctrl,获取到ngModelController这个东西.ngModelController实例有两个对象,一个是 $validators对象,一个是 $asyncValidators对象.当我们需要添加自定义的同步验证规则时,使用$validators对象,当我们需要添加自定义的异步验证规则时,使用$asyncValidators对象.通过栗子来说明:html:<!DOCTYPEhtml>&l...
angular-ngSanitize模块-linky过滤器详解
本篇主要讲解angular中的linky这个过滤器.此过滤器依赖于ngSanitize模块.linky能找出文本中的链接,然后把它转换成html链接.什么意思,就是说,一段文本里有一个链接,但是这个链接没有被a标签嵌套,linky能把它找出来,然后给它加上a标签并且给a链接添加正确的href属性,还可以设置打开的方式(_blank,_self,等...).它查找链接是根据这些关键词来的:http/https/ftp/mailto/,或者就直接是一个email地址.下面来看栗子:html:<!DOCTYPEhtml><htmlng-app="myApp"><head><title></title><metacharset="utf-8"><scriptsrc="../angular-1.3.2.js"></script><scriptsrc="angular-sanitize.min.js"></script><scriptsrc="script.js">&...
angular-1.3 之ng-model-options指令
ng-model-options是angular-1.3新出的一个指令,这篇文章就来介绍这个指令的用法. ng-model-options允许我们控制ng-model何时进行同步.比如:1.当某个确定的事件被触发的时候2.在指定的防抖动延迟时间之后,这样视图值就会在指定的时间之后被同步到模型. 为了了解它到底是什么意思,我们从一个最简单的ng-model指令创建的input元素双向数据绑定的栗子开始看起:eg-0.0核心代码:<inputtype="text"ng-model="name"><p>Hello{{name}}!</p>点击查看效果: http://jsfiddle.net/gdjwk5u7/这是我们都很熟悉的,在angular-1.2版本就可以实现的ng-model双向绑定.可以看到,它是实时同步更新的,input中每输入一个字,它就立刻同步到数据模型,这是因为,每次输入input,都会触发一个input的事件,然后angular就会执行的$digest循环,直到模型稳定下来.我们不用手动设置任何事件监听来...
angular控制器的执行顺序和服务的注入情况
这篇文章到底要讲什么呢?这必须要从栗子开始讲起...看下面这两段代码:demo1: http://jsfiddle.net/ujzmvp3j/1/demo2: http://jsfiddle.net/m2d2b6qL/'foo',服务中有一个name属性,它分别被注入到ctrlOne和ctrlTwo两个控制器中,然后在ctrlOne控制器里对name属性进行了修改.根据 angular五种服务详解 里所说的,服务的实例是一个引用对象,在一个地方修改它,其它地方也会变化.所以,当在ctrlOne里面修改了name,ctrlTwo里面的name也变化了.但是demo2,我们把两个div调换顺序:可以看到,虽然js代码一样,修改了ctrlOne里面的name属性,但是视图的控制器Two里没有变化.原因如下:js书写控制器的顺序无所谓,它不会立刻实例化这些控制器,也不会在加载js以后就执行控制器里的代码,也不会注入服务和指令.当解析html的时候,它的ng-controller遇到什么控制器,它就去实例化哪个控制器.这个时候,控制器里面的代码才会被执行到...
angular五种服务详解
在这之前angular学习笔记(十五)-module里的'服务'这篇文章里,已经大致讲解了ng中的'服务',在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实,创建服务有5种方法,这篇文章就来具体讲解ng中的五种服务类型.首先,为了举栗子,先写好如下的模型,控制器,html:html:<!DOCTYPEhtml><htmlng-app="serviceApp"><head><title>服务</title><metacharset="utf-8"><scriptsrc="../angular.js"></script><scriptsrc="script.js"></script><!--<scriptsrc="script_2.js"></script>--></head><body><divng-controller="myCtrl">name:{{n...
angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法.$location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一.获取url的相关方法:以'http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash'这个路径为例:1. 获取当前完整的url路径:$location.absUrl()://http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash*2.获取当前url路径(当前url#后面的内容,包括参数和哈希值):$location.url();///foo?name=bunny#myhash*3.获取当前url的子路径(也就是当前url#后面的内容,不包括参数):$location.path()///foo4.获取当前url的协议(比如http,https)$location.protocol()//http5.获取当前url的主机...
angular内置过滤器-filter
这篇文章来讲解一下angular内置的filter过滤器.没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就是过滤器的名字~这个过滤器是干嘛的呢?它的作用是:'从数组中过滤出需要的项,放入新的数组并返回这个新数组。'一.用在html模板里:因为是用来过滤数组,所以这个过滤器基本上都用在ng-repeat指令上,比如:<divng-repeat="listinlists|filter:expression:comparator"></div>filter过滤器会对lists数组进行过滤返回一个新的数组,过滤的方式取决于后面两个参数: expression:comparator*在最早的angular版本中,是没有第二个参数的.本篇的例子都是基于下面这段html和js的:可以在这里输入各个例子的代码进行调试,查看结果:http://jsfiddle.net/fxgzxuou/<!DOCTYPEhtml><htmlng-app="app"><...
angular-resource版本差异问题
在 AngularJSv1.3.0-beta.14这个版本里,使用query方法,如果传递进来的数据不是数组,会报错.在 AngularJSv1.2.18这个版本里,使用query方法,如果传递进来的数据不是数组,而是json对象,也不会报错,而是把json对象当做数组来进行处理建议使用v1.2.18这个版本,因为当数据的条数不固定的时候,需要增删改查,如果后台数据模型也是数组,很不好操作. ...
关于angular的$resource中的isArray属性问题
在之前的文章中讲到了在使用$resource的时候,有一个isArray属性.这个属性在两个地方有提到:1.angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构$resource的四个方法:query方法,get方法,save方法,remove方法,delete方法这四个方法里,唯独query方法,它的isArray属性是true,所以,query接受到的数据是数组,而其余四个方法,接收到的数据必须不能是数组2. angular学习笔记(二十八-附1)-$resource中的资源的方法$resource的自定义方法:比如该篇的栗子中使用的$charge方法,在定义自定义方法的时候,也要指定isArray属性.不指定的话默认是false. 如果我们不设置isArray为true,但是后台却给它返回一个数组资源,是会报错的.那么,如果在使用get方法,save方法,remove方法,delete方法的时候,需要返回数组对象呢?答案是不能的.因为$resource这个服务没有提供相应的配置方法.那么,如果自定义一个方法,设...
angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子:html:<outer‐directive><inner‐directive></inner‐directive></outer‐directive>这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素.js:app.directive('outerDirective',function(){return{scope:{},restrict:'AE',controller:function($scope,$compile,$http){this.addChild=function(nestedDirective){//this指代controllerconsole.log('Gotthemessagefromnesteddirective'+nestedDirective.message);}}}});app.directive(...
angular学习笔记(三十)-指令(9)-一个简单的指令示例
学了前面这么多关于指令的知识,现在就用指令来写一个小组件:expander这个组件的功能就是点击开展菜单,再点击收起菜单:↑↓点击展开收起下面来看它的代码:html:<!DOCTYPEhtml><htmlng-app="expanderModule"><head><title>20.9指令-expander</title><metacharset="utf-8"><linkhref="../bootstrap.css"rel="stylesheet"><scriptsrc="../angular.min.js"></script><scripttype="text/ng-template"id="text.html"><divclass="btn-group"><buttonclass="btnbtn-primarybtn-smdropdown-toggle"type="button"data-toggle="dropdown"n...