Angular学习-$location
2015-04-13 16:17
99 查看
序
angularjs location封装了浏览器原生的location对象,提供了很多方便的方法。本文的angularjs版本是1.2.2
location是什么?
location是一个关于当前网页地址的对象,从属于window之下,当然,window之下的对象在不引起歧义或者混淆的情况下,一般是可以省去window的。location本身是一个js对象,包含一些属性和方法。具体可以参考w3school 。angular location
angular中的location是一个service,写作$location。getter和setter方法
getter方法用于获取对象的私有属性,setter用于设置对象的私有属性。js中是不存在私有变量的,但是通过一些命名方式(如私有变量名以双下划线开始)约定,可以人为的规定某些变量为私有变量。
正因为js本身不支持私有变量,所以对象的属性我们都可以通过 object.variable的方式读取。getter和setter方法只是我们为了让js对象的操作更加规范。例如,可以在setter方法中做一些规则校验,在getter方法中做一些初始化,等等。
Methods
注:如果方法没有参数说明或者示例,表示不需要参数。absUrl()
getter:返回完整url。hash()
getter:返回hash段。setter:设置hash段并返回location。如location。如location.hash(‘xxx’)。
host()
getter:返回host。path()
getter:返回路径。http://a.com/123, path就是123。setter:设置路径。$location.path(‘/124’)。
port()
getter:返回端口号。protocol()
getter:返回协议名,如https。search()
search指的是url的query部分。window.location.search会返回包括?的部分,个人认为十分不方便解析。
假设url为:http://a.com?name=remind&gender=male,
getter: 返回search对象
getter返回对象:{name:’remind’,gender:’male’}。
setter: 设置query,有两种方式。
1. location.search(′name′,′remind′);location.search('name','remind') ;location.search(‘gender’,’male’);
这种方法是部分更新(part update)。
如果在一个angular周期中,只更新其中一个,如只执行
$location.search(‘name’,’remind’)
那么gender会自动设置成空,如:http://a.com?name=remind&gender
2. location.search(name:′remind′,gender:′male′);这种方法是全体更新(wholeupdate)。如果在一个angular周期中,执行location.search({name:’remind’,gender:’male’});
这种方法是全体更新(whole update)。
如果在一个angular周期中,执行
location.search({name:’remind’});
那么gender会被删除,如 : http://a.com?name=remind
可以发现,设置方法类似jquery设置css的方式,对比一下w3school.
遗憾的是search不支持查询某个特定值,例如location.search(‘name′),返回location.search(‘name’),返回
location对象而不是期待的name值。
Events
当调用$location.path(‘xxx’)使得地址变更时,以下事件会被广播出去,在angular的作用域(scope)中可以监听到此类事件。$locationChangeStart
在$location的path change之后,url change发生改变之前,此事件被广播出去。url change可以被阻止,方法是调用此事件的preventDefault方法。$locationChangeSuccess
当url change之后,此event被广播出去。参考
angular 1.2.2 location service相关文章推荐
- Angular学习(十五)——Route和$location/与服务器交互
- Angular学习笔记(持续更新)
- Angular 4依赖注入学习教程之组件服务注入(二)
- Angular 4依赖注入学习教程之Injectable装饰器(六)
- JavaScript学习笔记——BOM_window子对象_History、Location、Screnn对象
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
- Angular.JS学习之依赖注入$injector详析
- angular学习总结二——数据&事件绑定(ngIf、ngFor、ngSwitch、ngModel)
- AngularJS学习之三:学习Angular
- Angular 学习系列 - - form.FormController、ngModel.NgModelController
- Angular 学习系列 - - angular.element
- Angular 学习系列 - - angular.equals
- angular.js学习(1)--指令之间的交互--动感超人
- angular指令学习(三)--自定义指令之compile、link的学习
- angular.js学习(2)--服务和指令
- angular 2.0 模块化学习
- angular学习笔记(二)-创建angular模块
- Angular学习笔记
- angular学习(一)—— 概览
- angular学习笔记(十)-src和href处理