详解angular中通过$location获取路径(参数)的写法


Posted in Javascript onMarch 21, 2017

我最近在研究angular中通过$location获取路径(参数)的写法,在网上搜索了很多的资料,正好今天有时间,就整理一下!

以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例

【一】获取 (不修改URL)

//获取当前完整的url路径 
var absurl = $locationabsUrl(); 
//http://88:8100/#/homePage?id=10&a=100 
 
// 获取当前url路径(当前url#后面的内容,包括参数和哈希值): 
 var url = $locationurl(); 
 // 结果:/homePage?id=10&a=100  
 
 // 获取当前url的子路径(也就是当前url#后面的内容,不包括参数) 
var pathUrl = $locationpath() 
//结果:/homePage  
 
//获取当前url的协议(比如http,https) 
var protocol = $locationprotocol(); 
//结果:http  
 
//获取主机名 
var localhost = $locationhost(); 
//结果:88 
  
//获取当前url的端口 
var port = $locationport(); 
//结果:8100 
 
//获取当前url的哈希值 
var hash = $locationhash() 
//结果:http://088   
 
 //获取当前url的参数的序列化json对象 
 var search = $locationsearch(); 
 //结果:{id: "10", a: "100"}

【二】修改 (改变URL相关内容)

//1 修改url的子路径部分(也就是当前url#后面的内容,不包括参数): 
 $locationurl('/validation'); 
//结果:http://88:8100/#/validation 
 
 //2 修改url的哈希值部分 
$locationhash('myhash3'); 
//结果:http://88:8100/#/homePage?id=10&a=100#myhash3 
 
//3 修改url的参数部分(第一个参数表示url参数的属性名,第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增) 
$locationsearch('id','111') 
// 结果(修改参数值):http://88:8100/#/homePage?id=111&a=100 
 
$locationsearch('ids','111') 
// 结果(新增ids参数): http://88:8100/#/homePage?id=111&a=100&ids=111 
 
//一次性修改多个参数 
$locationsearch({id:'55','a':'66'}) 
//结果:http://88:8100/#/homePage?id=55&a=66#myhash3 
 
 //第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过 
 $locationsearch('age',null)

【三】修改URL但不存入历史记录

在上面的修改url的方法的时候,每修改一次,url都会被存入历史记录,可以使用后退按钮回到修改前的url,如果不想要这种效果,而仅仅是替换当前的记录,可以使用  $location.path('/validation').replace();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
原生js实现吸顶效果
Mar 13 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
详解用async/await来处理异步
Aug 28 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 #Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 #Javascript
js省市区级联查询(插件版&无插件版)
Mar 21 #Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 #Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 #Javascript
node安装--linux下的快速安装教程
Mar 21 #Javascript
You might like
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php牛逼的面试题分享
2013/01/18 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python 常用 PEP8 编码规范详解
2017/01/22 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
jupyter实现重新加载模块
2020/04/16 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Python如何读写CSV文件
2020/08/13 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
大学军训自我鉴定
2013/12/15 职场文书
给护士表扬信
2014/01/19 职场文书
购房意向书
2014/04/01 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
个人年终总结结尾
2015/03/06 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
校园安全学习心得体会
2016/01/18 职场文书