详解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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
如何使用CocosCreator对象池
Apr 14 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
浅谈php的优缺点
2015/07/14 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python Django搭建网站流程图解
2020/06/13 Python
python中turtle库的简单使用教程
2020/11/11 Python
Django实现简单的分页功能
2021/02/22 Python
几道数据库的面试题或笔试题
2014/05/31 面试题
校园广播稿100字
2014/10/06 职场文书
师德师风自查总结
2014/10/14 职场文书
监考失职检讨书
2015/01/26 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
python文件目录操作之os模块
2021/05/08 Python
MYSQL 表的全面总结
2021/11/11 MySQL
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js