AngularJS通过$location获取及改变当前页面的URL


Posted in Javascript onSeptember 23, 2016

注意

本文中获取与修改的URL以 ‘http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例:

一. 获取url的相关方法(不修改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的相关方法(改变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();

总结

以上就是关于AngularJS通过$location获取及改变当前页面URL的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助。如果有疑问大家可以留言交流。

Javascript 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
AngularJS监听路由的变化示例代码
Sep 23 #Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 #Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 #Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 #Javascript
form表单转Json提交的方法(推荐)
Sep 23 #Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 #Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 #Javascript
You might like
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
JS实现轮播图效果
2020/01/11 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
python中实现php的var_dump函数功能
2015/01/21 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python函数定义和调用过程详解
2020/02/09 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
怎样写演讲稿
2014/01/04 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
个人务虚会发言材料
2014/10/20 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
焦裕禄观后感
2015/06/03 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL