详解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代码
Nov 19 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
详解Node全局变量global模块
Sep 28 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
three.js实现圆柱体
Dec 30 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
第十三节--对象串行化
2006/11/16 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
python dataframe astype 字段类型转换方法
2018/04/11 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
英国电子专家:maplin
2019/09/04 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android