[AngularJS] $location 服务简介

[AngularJS] $location 服务简介
参考博客: https://www.cnblogs.com/gaoruixin/p/6070502.html

简介

$location服务解析在浏览器地址栏中的URL（基于window.location）并且让URL在你的应用中可用。改变在地址栏中的URL会作用到$location服务，同样的，改变$location服务也会改变浏览器的地址栏。（可以使用$location进行重定向等操作）

$location服务：

暴露浏览器地址栏中的URL，让你可以：
- 监察URL。
- 改变URL。
与浏览器同步URL，当：
- 改变地址栏。
- 单击『前进』『后退』或一个历史记录中的链接。
- 打开一个链接。
- 将URL对象表示为一个方法集。 (protocol, host, port, path, search, hash)
服务依赖：
- $browser
- $sniffer
- $rootElement
内置方法：
- absUrl( )：只读；根据在RFC 3986中指定的规则，返回url，带有所有的片段。
- hash( )：读、写；当带有参数时，返回哈希碎片；当在带有参数的情况下，改变哈希碎片时，返回$location。
- host( )：只读；返回url中的主机路径。
- path( )：读、写；当没有任何参数时，返回当前url的路径；当带有参数时，改变路径，并返回$location。（返回的路径永远会带有/）
- port( )：只读；返回当前路径的端口号。
- protocol( )：只读；返回当前url的协议。
- replace( )：如果被调用，就会用改变后的URL直接替换浏览器中的历史记录，而不是在历史记录中新建一条信息，这样可以阻止『后退』。
- search( )：读、写；当不带参数调用的时候，以对象形式返回当前url的搜索部分。
- url( )：读、写；当不带参数时，返回url；当带有参数时，返回$location。
内置事件：
- $locationChangeStart：在URL改变前发生。这种改变可以通过调用事件的preventDefault方法为阻止。查看ng.$rootScope.Scope#$on获得更多的细节。成功时触发$locationChangeSuccess事件。
- $locationChangeSuccess：当URL改变后发生。
使用

何时使用$location

任何你想要改变当前URL的时候，都可以使用$location。

$location不会做

当浏览器的URL改变时，不会重新加载整个页面。如果想要重新加载整个页面，需要使用$window.location.href。

-----------------------------------------------------------------

一. 获取url的相关方法:

以 'http://localhost:8080/text#/foo?name=bunny#myhash' 这个路径为例:

1. 获取当前完整的url路径:
```
$location.absUrl():
// http://localhost:8080/text#/foo?name=bunny#myhash
```
*2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值):
```
$location.url();
// /foo?name=bunny#myhash
```
*3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数):
```
$location.path()
// /foo
```
4. 获取当前url的协议(比如http,https)
```
$location.protocol()
// http
```
5. 获取当前url的主机名
```
$location.host()
// localhost
```
6. 获取当前url的端口
```
$location.port()
// 80 (这里就是wamp的默认端口号)
```
*7. 获取当前url的哈希值
```
$location.hash()
// myhash
```
*8. 获取当前url的参数的序列化json对象
```
$location.search()
// {"name":"bunny"}
```
二. 修改url的相关方法:

在上面讲到的所有获取url的8个方法,其中*开头的四个方法,可以传入参数进行修改url,在这种情况下,函数的返回值都是$location本身:

1. 修改url的子路径(也就是当前url#后面的内容,不包括参数):

参数格式:字符串
```
$location.url('/foo2?name=bunny2&age=12#myhash2');
// http://localhost:8080/text#/foo2?name=bunny2&age=12#myhash2
```
2. 修改url的子路径部分(也就是当前url#后面的内容,不包括参数):

参数格式:字符串
```
$location.path('/foo2/foo3');
// http://localhost:8080/text#/foo2/foo3/?name=bunny2&age=12#myhash2
```
3. 修改url的哈希值部分

参数格式:字符串
```
$location.hash('myhash3');
// http://localhost:8080/text#/foo2/foo3/?name=bunny2&age=12#myhash3
```
4. 修改url的参数部分

(1).传入两个参数,第一个参数的格式为字符串:

①第二个参数的格式也是字符串

第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增
```
$location.search('name','code_bunny')
// http://localhost:8080/text#/foo2/foo3/?name=code_bunny2&age=12#myhash3
```
②第二个参数的格式为数组,数组中的各个值也是字符串或者布尔值

第一个参数表示url参数的属性名,第二个参数是该属性名的值,有多少个值,url中就会依次重复出现多少个.如下:
```
$location.search('love',['zxg','mitu'])
// http://localhost:8080/text#/foo2/foo3/?name=code_bunny2&age=12&love=zxg&love=mitu#myhash3
```
(2).传入两个参数,第一个参数为字符串,第二个参数为null:

第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过
```
$location.search('age',null)
// http://localhost:8080/text#/foo2/foo3/?name=code_bunny2#myhash3
```
(3).传入一个参数,格式为json对象:

直接用这个json对象里的键值对替换整个url的参数部分

①普通的键值对:
```
$location.search({name:'papamibunny',age:16,love:'zxg'})
// http://localhost:8080/text#/foo2/foo3/?name=papamibunny&age=16&love=zxg#myhash3
```
②属性值为一个数组:(和(1)②一样,重复这个属性)
```
$location.search({name:['code_bunny','white_bunny','hua_bunny'],age:16,love:'zxg'})
// http://localhost:8080/text#/foo2/foo3/?name=code_bunny&name=white_bunny&name=hua_bunny&age=16&love=zxg#myhash3
```
(4).传入一个参数,格式为字符串:

直接用这个字符串替换整个url的参数部分(没有键值对,参数部分就是一个属性名,但转换成json对象的话,这个属性的值就是true,但是在url里没有体现)
```
$location.search('bunnybaobao')
// http://localhost:8080/text#/foo2/foo3/?bunnybaobao#myhash3
// {"bunnybaobao":true}
```
三. 不存入历史记录:

在使用 '二' 里面的所有修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用:
```
$location.replace()
```
举个栗子:
```
// 原url:
// http://localhost:8080/text#/foo?name=bunny#myhash
```
```
$location.url('/foo2?name=bunny2&age=12#myhash2');
// 修改一次后:
// http://localhost:8080/text#/foo2?name=bunny2&age=12#myhash2
```
```
// 按下后退回到原url:
// http://localhost:8080/text#/foo?name=bunny#myhash
// 再按下前进回到修改后url:
// http://localhost:8080/text#/foo2?name=bunny2&age=12#myhash2
```
```
$location.path('/foo2/foo3').replace();
// 修改第二次后调用replace():
// http://localhost:8080/text#/foo2/foo3?name=bunny2&age=12#myhash2
```
```
// 按下后退,不会回到第二次修改前的url,而是回到第一次修改前的url:
// http://localhost:8080/text#/foo?name=bunny#myhash
```
四.$locationChangeStart和$locationChangeStart事件

这两个事件分别发生在当url开始发生改变,以及url改变完成.他们都被绑定在$rootScope里面:
```
    $rootScope.$on('$locationChangeStart',function(){
        console.log('开始改变$location')
    });
    $rootScope.$on('$locationChangeSuccess',function(){
        console.log('结束改变$location')
    });
```
这个和$route里的$routeChangeStart和$routeChangeSuccess很类似,但是要注意的是,

虽然都是改变url发生的事件,但要触发$locationChangeStart和$locationChangeSuccess事件,

就必须是$location服务导致的url变化,通过$route定义导致的url变化,不会触发$locationChangeStart和$locationChangeSuccess事件,

同样,这里是通过$location服务导致的url变化,所以即使定义了$routeChangeStart和$routeChangeSuccess事件,它也是不会被触发的.
相关阅读:
react方法传参的两种方式
 react引入本地图片和远程图片
 用yarn代替npm
react生命周期
 react子传父
 react删除元素
 react遍历数组
 react监听input框里的值
 react创建组件的两种方式
 vue打包更改dist文件夹名称
原文地址：https://www.cnblogs.com/xumBlog/p/9942704.html

[AngularJS] $location 服务简介

简介

$location服务：

服务依赖：

内置方法：

内置事件：

使用

何时使用$location

$location不会做

一. 获取url的相关方法:

二. 修改url的相关方法:

三. 不存入历史记录:

四.$locationChangeStart和$locationChangeStart事件