详解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函数
Oct 16 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
PHP 文件缓存的性能测试
2010/04/25 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
js 替换
2008/02/19 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
分析JS单线程异步io回调的特性
2017/12/01 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
Vue指令指令大全
2019/02/09 Javascript
了解重排与重绘
2019/05/29 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
vuex的使用和简易实现
2021/01/07 Vue.js
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python实现单机五子棋
2020/08/28 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
大学生毕业的自我评价分享
2014/01/02 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers