想了解AngularJS通过$location获取与修改当前页面URL的新动态吗?本文将为您提供详细的信息,我们还将为您解答关于angular获取上一个url的相关问题,此外,我们还将为您介绍关于$l
想了解AngularJS 通过 $location 获取与修改当前页面URL的新动态吗?本文将为您提供详细的信息,我们还将为您解答关于angular获取上一个url的相关问题,此外,我们还将为您介绍关于$location.path()vs $location.hash()in angularjs、Angular $location 获取 url 参数、Angular 通过注入 $location 获取与修改当前页面URL、Angular 通过注入 $location 获取与修改当前页面URL的实例的新知识。
本文目录一览:- AngularJS 通过 $location 获取与修改当前页面URL(angular获取上一个url)
- $location.path()vs $location.hash()in angularjs
- Angular $location 获取 url 参数
- Angular 通过注入 $location 获取与修改当前页面URL
- Angular 通过注入 $location 获取与修改当前页面URL的实例
AngularJS 通过 $location 获取与修改当前页面URL(angular获取上一个url)
以下获取与修改的 URL 以 (http://172.16.0.88:8100/#/homePage?id=10&a=100)为例
1、获取url参数:
//1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 //2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $location.url(); // 结果:/homePage?id=10&a=100 //3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数) var pathUrl = $location.path() //结果:/homePage //4.获取当前url的协议(比如http,https) var protocol = $location.protocol(); //结果:http //5.获取主机名 var localhost = $location.host(); //结果:172.16.0.88 //6.获取当前url的端口 var port = $location.port(); //结果:8100 //7.获取当前url的哈希值 var hash = $location.hash() //结果:http://172.16.088 //8.获取当前url的参数的序列化json对象 var search = $location.search(); //结果:{id: "10",a: "100"}
2、修改url参数:
//1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数): $location.url('/validation'); //结果:http://172.16.0.88:8100/#/validation //2 修改url的哈希值部分 $location.hash('myhash3'); //结果:http://172.16.0.88:8100/#/homePage?id=10&a=100#myhash3 //3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增) $location.search('id','111') // 结果(修改参数值):http://172.16.0.88:8100/#/homePage?id=111&a=100 $location.search('ids','111') // 结果(新增ids参数): http://172.16.0.88:8100/#/homePage?id=111&a=100&ids=111 //4.一次性修改多个参数 $location.search({id:'55','a':'66'}) //结果:http://172.16.0.88:8100/#/homePage?id=55&a=66#myhash3 //5.第一个值表示url参数的属性名,则删除该属性,那就等于没改过 $location.search('age',null)
在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用 $location.path('/validation').replace();
$location.path()vs $location.hash()in angularjs
$location.hash()给出了home / new,$location.path也给了home / new
>两者有什么区别?
>如果在home / new的控制器内部,我写$location.hash(“#/ home / new”)或$location.path(“/ home / new”)都不会重新加载partial,但是如果我做location.href =“#/ home / new”,它重新加载partial.为什么是这样?
另外,如果在部分内部存在< a href =“#/ home / new”>这也将重新加载部分.
为什么不设置路径/哈希重新加载部分?
第一个“哈希”确实只是为了浏览器的兼容性,如果您使用HTML5模式,则不会显示.
例如,给定此URL:
http://localhost/spa.htm
如果你设置:
$location.path('/myPath');
你会得到:
http://localhost/spa.htm#/myPath
在这种情况下,“哈希”只是为浏览器保存的URL,方法是路径.注意,当您调用路径时,不需要先前/添加,即’myPath’成为’/ myPath’.
如果你随后设置:
$location.hash('myHash');
你会得到:
http://localhost/spa.htm#/myPath#myHash
最后,假设你没有先设置路径,那么你会得到:
http://locahost/spa.htm#/#myHash
如果您使用的是HTML5模式,则不附加初始散列的路径将被追加.
第一个哈希用于附加路由,第二个是对页面上的内容的引用.例如,如果您使用$anchorScroll服务,它将对$location.hash()中放置的内容进行响应,而不在$location.path()中.
总结:
http://localhost/spa.htm#{path}#{hash}
Angular $location 获取 url 参数
今天写了一个demo,想用angular来获取url参数,网址的格式是这样的: "xxxxx.html?aa=112313"
结果是search出来的结果是空的。
在网上搜了一阵之后,解法是这样的:
需要这样组装url:
"xxxxx.html#?aa=112313"
在问号前面加#.这好像是angular的一个bug。
附链接:
https://github.com/angular/angular.js/issues/7239
Angular 通过注入 $location 获取与修改当前页面URL
以下获取与修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 为例
【一】获取 (不修改URL)
- //1.获取当前完整的url路径
- var absurl = $location.absUrl();
- //http://172.16.0.88:8100/#/homePage?id=10&a=100
- //2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值):
- var url = $location.url();
- // 结果:/homePage?id=10&a=100
- //3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数)
- var pathUrl = $location.path()
- //结果:/homePage
- //4.获取当前url的协议(比如http,https)
- var protocol = $location.protocol();
- //结果:http
- //5.获取主机名
- var localhost = $location.host();
- //结果:172.16.0.88
- //6.获取当前url的端口
- var port = $location.port();
- //结果:8100
- //7.获取当前url的哈希值
- var hash = $location.hash()
- //结果:http://172.16.088
- //8.获取当前url的参数的序列化json对象
- var search = $location.search();
- //结果:{id: "10", a: "100"}
【二】修改 (改变URL相关内容)
- //1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数):
- $location.url(''/validation'');
- //结果:http://172.16.0.88:8100/#/validation
- //2 修改url的哈希值部分
- $location.hash(''myhash3'');
- //结果:http://172.16.0.88:8100/#/homePage?id=10&a=100#myhash3
- //3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增)
- $location.search(''id'',''111'')
- // 结果(修改参数值):http://172.16.0.88:8100/#/homePage?id=111&a=100
- $location.search(''ids'',''111'')
- // 结果(新增ids参数): http://172.16.0.88:8100/#/homePage?id=111&a=100&ids=111
- //4.一次性修改多个参数
- $location.search({id:''55'',''a'':''66''})
- //结果:http://172.16.0.88:8100/#/homePage?id=55&a=66#myhash3
- //5.第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过
- $location.search(''age'',null)
【三】修改URL但不存入历史记录
在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用 $location.path(''/validation'').replace();
Angular 通过注入 $location 获取与修改当前页面URL的实例
以下获取与修改的 URL 以 ( ) 为例
【一】获取 (不修改URL)
【二】修改 (改变URL相关内容)
【三】修改URL但不存入历史记录
在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,
我们今天的关于AngularJS 通过 $location 获取与修改当前页面URL和angular获取上一个url的分享就到这里,谢谢您的阅读,如果想了解更多关于$location.path()vs $location.hash()in angularjs、Angular $location 获取 url 参数、Angular 通过注入 $location 获取与修改当前页面URL、Angular 通过注入 $location 获取与修改当前页面URL的实例的相关信息,可以在本站进行搜索。
本文标签: