详解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 相关文章推荐
node.js [superAgent] 请求使用示例
Mar 13 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
微信小程序排坑指南详解
May 23 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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 破解防盗链图片函数
2008/12/09 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
Javascript的一种模块模式
2010/09/08 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
班长演讲稿范文
2014/04/24 职场文书
委托书怎么写
2014/07/31 职场文书
先进人物事迹材料
2014/12/29 职场文书
行政处罚告知书
2015/07/01 职场文书
教师节校长致辞
2015/07/31 职场文书