详解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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Javascript实现打鼓效果
Jan 29 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实现的连贯操作、链式操作实例
2014/07/08 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
浅探express路由和中间件的实现
2019/09/30 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python递归函数实例讲解
2019/02/27 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
Python脚本调试工具安装过程
2021/01/11 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
自行车租赁公司创业计划书
2014/01/28 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
证婚人致辞精选
2015/07/28 职场文书
python实现简单的聊天小程序
2021/07/07 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫