一. 获取url的相关方法:
以 ‘http://localhost/ l o c a t i o n / 21.1 location/21.1%20 location/21.1location.html#/foo?name=bunny#myhash’ 这个路径为例:
1. 获取当前完整的url路径:
l
o
c
a
t
i
o
n
.
a
b
s
U
r
l
(
)
:
/
/
h
t
t
p
:
/
/
l
o
c
a
l
h
o
s
t
/
location.absUrl(): // http://localhost/
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()
// /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#后面的内容,不包括参数):
参数格式:字符串
KaTeX parse error: Expected 'EOF', got '&' at position 32: …oo2?name=bunny2&̲age=12#myhash2'…location/21.1%20$location.html#/foo2?name=bunny2&age=12#myhash2
- 修改url的子路径部分(也就是当前url#后面的内容,不包括参数):
参数格式:字符串
l o c a t i o n . p a t h ( ′ / f o o 2 / f o o 3 ′ ) ; / / h t t p : / / l o c a l h o s t / location.path('/foo2/foo3'); // http://localhost/ location.path(′/foo2/foo3′);//http://localhost/location/21.1%20$location.html#/foo2/foo3/?name=bunny2&age=12#myhash2
- 修改url的哈希值部分
参数格式:字符串
l o c a t i o n . h a s h ( ′ m y h a s h 3 ′ ) ; / / h t t p : / / l o c a l h o s t / location.hash('myhash3'); // http://localhost/ location.hash(′myhash3′);//http://localhost/location/21.1%20$location.html#/foo2/foo3/?name=bunny2&age=12#myhash3
- 修改url的参数部分
(1).传入两个参数,第一个参数的格式为字符串:
①第二个参数的格式也是字符串
第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增
l
o
c
a
t
i
o
n
.
s
e
a
r
c
h
(
′
n
a
m
e
′
,
′
c
o
d
e
b
u
n
n
y
′
)
/
/
h
t
t
p
:
/
/
l
o
c
a
l
h
o
s
t
/
location.search('name','code_bunny') // http://localhost/
location.search(′name′,′codebunny′)//http://localhost/location/21.1%20$location.html#/foo2/foo3/?name=code_bunny2&age=12#myhash3
②第二个参数的格式为数组,数组中的各个值也是字符串或者布尔值
第一个参数表示url参数的属性名,第二个参数是该属性名的值,有多少个值,url中就会依次重复出现多少个.如下:
l o c a t i o n . s e a r c h ( ′ l o v e ′ , [ ′ z x g ′ , ′ m i t u ′ ] ) / / h t t p : / / l o c a l h o s t / location.search('love',['zxg','mitu']) // http://localhost/ location.search(′love′,[′zxg′,′mitu′])//http://localhost/location/21.1%20$location.html#/foo2/foo3/?name=code_bunny2&age=12&love=zxg&love=mitu#myhash3
(2).传入两个参数,第一个参数为字符串,第二个参数为null:
第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过
l o c a t i o n . s e a r c h ( ′ a g e ′ , n u l l ) / / h t t p : / / l o c a l h o s t / location.search('age',null) // http://localhost/ location.search(′age′,null)//http://localhost/location/21.1%20$location.html#/foo2/foo3/?name=code_bunny2#myhash3
(3).传入一个参数,格式为json对象:
直接用这个json对象里的键值对替换整个url的参数部分
①普通的键值对:
l
o
c
a
t
i
o
n
.
s
e
a
r
c
h
(
n
a
m
e
:
′
p
a
p
a
m
i
b
u
n
n
y
′
,
a
g
e
:
16
,
l
o
v
e
:
′
z
x
g
′
)
/
/
h
t
t
p
:
/
/
l
o
c
a
l
h
o
s
t
/
location.search({name:'papamibunny',age:16,love:'zxg'}) // http://localhost/
location.search(name:′papamibunny′,age:16,love:′zxg′)//http://localhost/location/21.1%20$location.html#/foo2/foo3/?name=papamibunny&age=16&love=zxg#myhash3
②属性值为一个数组:(和(1)②一样,重复这个属性)
l o c a t i o n . s e a r c h ( n a m e : [ ′ c o d e b u n n y ′ , ′ w h i t e b u n n y ′ , ′ h u a b u n n y ′ ] , a g e : 16 , l o v e : ′ z x g ′ ) / / h t t p : / / l o c a l h o s t / location.search({name:['code_bunny','white_bunny','hua_bunny'],age:16,love:'zxg'}) // http://localhost/ location.search(name:[′codebunny′,′whitebunny′,′huabunny′],age:16,love:′zxg′)//http://localhost/location/21.1%20$location.html#/foo2/foo3/?name=code_bunny&name=white_bunny&name=hua_bunny&age=16&love=zxg#myhash3
(4).传入一个参数,格式为字符串:
直接用这个字符串替换整个url的参数部分(没有键值对,参数部分就是一个属性名,但转换成json对象的话,这个属性的值就是true,但是在url里没有体现)
l
o
c
a
t
i
o
n
.
s
e
a
r
c
h
(
′
b
u
n
n
y
b
a
o
b
a
o
′
)
/
/
h
t
t
p
:
/
/
l
o
c
a
l
h
o
s
t
/
location.search('bunnybaobao') // http://localhost/
location.search(′bunnybaobao′)//http://localhost/location/21.1%20$location.html#/foo2/foo3/?bunnybaobao#myhash3
// {“bunnybaobao”:true}
三. 不存入历史记录:
在使用 ‘二’ 里面的所有修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用:
$location.replace()
举个栗子:
// 原url:
// http://localhost/
l
o
c
a
t
i
o
n
/
21.1
location/21.1%20
location/21.1location.html#/foo?name=bunny#myhash
KaTeX parse error: Expected 'EOF', got '&' at position 32: …oo2?name=bunny2&̲age=12#myhash2'…location/21.1%20KaTeX parse error: Expected 'EOF', got '#' at position 14: location.html#̲/foo2?name=bunn…location/21.1%20KaTeX parse error: Expected 'EOF', got '#' at position 14: location.html#̲/foo?name=bunny…location/21.1%20$location.html#/foo2?name=bunny2&age=12#myhash2
l
o
c
a
t
i
o
n
.
p
a
t
h
(
′
/
f
o
o
2
/
f
o
o
3
′
)
.
r
e
p
l
a
c
e
(
)
;
/
/
修
改
第
二
次
后
调
用
r
e
p
l
a
c
e
(
)
:
/
/
h
t
t
p
:
/
/
l
o
c
a
l
h
o
s
t
/
location.path('/foo2/foo3').replace(); // 修改第二次后调用replace(): // http://localhost/
location.path(′/foo2/foo3′).replace();//修改第二次后调用replace()://http://localhost/location/21.1%20KaTeX parse error: Expected 'EOF', got '#' at position 14: location.html#̲/foo2/foo3?name…location/21.1%20$location.html#/foo?name=bunny#myhash
四. l o c a t i o n C h a n g e S t a r t 和 locationChangeStart和 locationChangeStart和locationChangeStart事件
这两个事件分别发生在当url开始发生改变,以及url改变完成.他们都被绑定在$rootScope里面:
$rootScope.$on('$locationChangeStart',function(){
console.log('开始改变$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
console.log('结束改变$location')
});
这个和 r o u t e 里 的 route里的 route里的routeChangeStart和 r o u t e C h a n g e S u c c e s s 很 类 似 , 但 是 要 注 意 的 是 , 虽 然 都 是 改 变 u r l 发 生 的 事 件 , 但 要 触 发 routeChangeSuccess很类似,但是要注意的是,虽然都是改变url发生的事件,但要触发 routeChangeSuccess很类似,但是要注意的是,虽然都是改变url发生的事件,但要触发locationChangeStart和 l o c a t i o n C h a n g e S u c c e s s 事 件 , 就 必 须 是 locationChangeSuccess事件,就必须是 locationChangeSuccess事件,就必须是location服务导致的url变化,通过 r o u t e 定 义 导 致 的 u r l 变 化 , 不 会 触 发 route定义导致的url变化,不会触发 route定义导致的url变化,不会触发locationChangeStart和 l o c a t i o n C h a n g e S u c c e s s 事 件 , 同 样 , 这 里 是 通 过 locationChangeSuccess事件,同样,这里是通过 locationChangeSuccess事件,同样,这里是通过location服务导致的url变化,所以即使定义了 r o u t e C h a n g e S t a r t 和 routeChangeStart和 routeChangeStart和routeChangeSuccess事件,它也是不会被触发的.
把上面讲到的这些一起举个栗子:
把 ‘一’ 里面的8个可以取到的url部分都赋值给$scope里的值,同时,把对应的修改方法绑定在对应的按钮上,以便在视图上查看变化过程.
需要注意的是,这里有个 s c o p e . r e f r e s h 方 法 , 因 为 这 里 scope.refresh方法,因为这里 scope.refresh方法,因为这里scope下的这些值是不会实时更新的.举栗, l o c a t i o n . u r l ( ) 是 个 方 法 , 获 取 当 前 的 u r l , 而 不 是 一 个 值 , 所 以 , 当 u r l 发 生 改 变 以 后 , 不 再 次 调 用 location.url()是个方法,获取当前的url,而不是一个值,所以,当url发生改变以后,不再次调用 location.url()是个方法,获取当前的url,而不是一个值,所以,当url发生改变以后,不再次调用location.url(),url值是不可能被实时更新的.所以refresh方法就是在每次url改变完成后,重新获取url对应的部分并更新视图.
html:
完整url路径: {{absurl}}
url路径(当前url#后面的内容,包括参数和哈希值): {{url}} 改变
相对路径(也就是当前url#后面的内容,不包括参数): {{path}} 改变
协议(比如http,https): {{protocol}}
主机名: {{host}}
端口号: {{port}}
哈希值: {{hash}} 改变
search值序列化json: {{search}} 改变1 改变2 改变3 改变4 改变5 改变6
js:/*21.1
l
o
c
a
t
i
o
n
∗
/
v
a
r
l
o
c
a
t
i
o
n
A
p
p
=
a
n
g
u
l
a
r
.
m
o
d
u
l
e
(
′
l
o
c
a
t
i
o
n
A
p
p
′
,
[
]
)
;
l
o
c
a
t
i
o
n
A
p
p
.
c
o
n
t
r
o
l
l
e
r
(
′
l
o
c
a
t
i
o
n
C
t
r
l
′
,
f
u
n
c
t
i
o
n
(
location*/ var locationApp = angular.module('locationApp',[]); locationApp.controller('locationCtrl',function(
location∗/varlocationApp=angular.module(′locationApp′,[]);locationApp.controller(′locationCtrl′,function(scope,
l
o
c
a
t
i
o
n
,
location,
location,timeout,$rootScope){
$scope.absurl = $location.absUrl();
$scope.url = $location.url();
$scope.path = $location.path();
$scope.protocol = $location.protocol();
$scope.host = $location.host();
$scope.port = $location.port();
$scope.hash = $location.hash();
$scope.search = $location.search();
$scope.refresh = function(){
$scope.absurl = $location.absUrl();
$scope.url = $location.url();
$scope.path = $location.path();
$scope.hash = $location.hash();
$scope.search = $location.search();
};
//重写url部分,相应的absurl,url,path,hash,search都会改变
$scope.changeUrl = function(){
$location.url('/foo2?name=bunny2&age=12#myhash2');
};
//重写path部分,相应的absurl,url,path都会改变
$scope.changePath = function(){
$location.path('/foo2/foo3');
};
//重写hash部分,相应的absurl,url,hash都会改变
$scope.changeHash = function(){
$location.hash('myhash3');
};
//修改search部分(方法1),相应的absurl,url,search,hash都会改变
//指定两个参数,第一个参数是属性名,第二个参数是属性值.
//如果属性名是已有属性,则修改,如果属性名不是已有的,则新增.
//属性值也可以是一个数组,参考方法6
$scope.changeSearch_1 = function(){
$location.search('name','code_bunny');
};
//修改search部分(方法2),相应的absurl,url,search,hash都会改变
//指定两个参数,第二个参数是null:删除第一个参数所指定的属性名.不再有这个属性
//若第一个参数不是已有的,则不发生任何改变
$scope.changeSearch_2 = function(){
$location.search('age',null);
};
//修改search部分(方法3),相应的absurl,url,search,hash都会改变
//指定一个参数,json对象,直接重写整个search部分.不管是不是已有属性,全部重写.
//这里属性的值可以是一个数组,参考方法5
$scope.changeSearch_3 = function(){
$location.search({name:'papamibunny',age:16,love:'zxg'});
};
//修改search部分(方法4),相应的absurl,url,search,hash都会改变
//指定一个参数,字符串,整个search部分就变为这个字符串.注意是没有属性值的.
$scope.changeSearch_4 = function(){
$location.search('bunnybaobao');
};
//修改search部分(方法5),相应的absurl,url,search,hash都会改变
//其余和方法3一样.全部重写search:
//指定一个参数,json格式,属性值是一个数组,那么最后的search会变成name=code_bunny&name=white_bunny&name=hua_bunny
$scope.changeSearch_5 = function(){
$location.search({name:['code_bunny','white_bunny','hua_bunny']});
};
//修改search部分(方法6),相应的absurl,url,search,hash都会改变
//其余和方法1一样,修改指定的属性名(或新增)
//第二个参数是一个数组,最后search中的love部分会变成love=zxg&love=mitu
//它和方法5的区别,就像方法1和方法3的区别,一个是修改或新增某个属性值,一个是重置整个search
$scope.changeSearch_6 = function(){
$location.search('love',['zxg','mitu']).replace();
};
//使用$location.replace(),则这一次的修改路径不会被记录到历史记录中,点击后退,不会后退到改变前的路径,而是后退到改变前的路径的改变前的路径
$rootScope.$on('$locationChangeStart',function(){
console.log('开始改变$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
s
c
o
p
e
.
r
e
f
r
e
s
h
(
)
;
c
o
n
s
o
l
e
.
l
o
g
(
′
结
束
改
变
scope.refresh(); console.log('结束改变
scope.refresh();console.log(′结束改变location’)
});
//这里就算绑定了
r
o
u
t
e
C
h
a
n
g
e
S
t
a
r
t
和
routeChangeStart和
routeChangeStart和routeChangeSuccess,也不会被触发,因为这里没有KaTeX parse error: Expected 'EOF', got '}' at position 13: route相关的服务. }̲); //注意这里scope下的这些值是不会实时更新的.举栗url,
l
o
c
a
t
i
o
n
.
u
r
l
(
)
是
个
方
法
,
获
取
当
前
的
u
r
l
,
而
不
是
一
个
值
,
/
/
所
以
,
当
u
r
l
发
生
改
变
以
后
,
不
再
次
调
用
location.url()是个方法,获取当前的url,而不是一个值, //所以,当url发生改变以后,不再次调用
location.url()是个方法,获取当前的url,而不是一个值,//所以,当url发生改变以后,不再次调用location.url(),url值是不可能被实时更新的.
本文来自 城续猿的员 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/u013184759/article/details/54138578?utm_source=copy