Angular学习-$location

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.hash(‘xxx’)。

host()

getter:返回host。

path()

getter:返回路径。http://a.com/123, path就是123。
setter:设置路径。$location.path(‘/124’)。

port()

getter:返回端口号。

protocol()

getter:返回协议名,如https。

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(‘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会被删除,如 : http://a.com?name=remind
可以发现,设置方法类似jquery设置css的方式,对比一下w3school.

遗憾的是search不支持查询某个特定值,例如 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值