详解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 相关文章推荐
jQuery常用且重要方法汇总
Jul 13 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
vuex存取值和映射函数使用说明
Jul 24 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 学习提高路线分享
2011/10/23 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
浅析python中的分片与截断序列
2016/08/09 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Python实现微信表情包炸群功能
2021/01/28 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
前处理组长岗位职责
2014/03/01 职场文书
销售内勤岗位职责
2014/04/15 职场文书
工作作风建设心得体会
2014/10/22 职场文书
人事任命书范本
2015/09/21 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android