详解Angular中通过$location获取地址栏的参数


Posted in Javascript onAugust 02, 2018

最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研究了一下,常用的方法就以下几种:

1.获取当前完整的url路径

var absurl = $location.absUrl(); //http://88:8100/#/homePage?id=10&a=100

2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值)

var url = $location.url(); // /homePage?id=10&a=100

3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数)

var pathUrl = $location.path() ///homePage

4.获取当前url的协议(比如http,https)

var protocol = $location.protocol(); //http

5.获取主机名

var localhost = $location.host(); //88

6.获取当前url的端口

var port = $location.port(); //8100

7.获取当前url的哈希值

var hash = $location.hash() //http://088

8.获取当前url的参数的序列化json对象

var search = $location.search(); //{id: "10", a: "100"}

9. 获取url参数

$location.search().name;

$location.search()['name'];

10.注意问题

如果是这样的地址:http://lele.sina.com?name=haha

需要在项目中注入$locationProvider服务

var searchApp = angular.module('searchApp', []);

searchApp.config(['$locationProvider', function($locationProvider) {

$locationProvider.html5Mode(true);

}]);

searchApp.controller('MainCtrl', ['$scope', '$location', function($scope, $location) {

if ($location.search().keyword) {

$scope.keyword = $location.search().keyword;

}
}]);

11.js中获取地址栏参数的方法(附加)

url = https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=%E5%A8%83%E5%93%88%E5%93%88
console.log(window.location.href ); // "https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=%E5%A8%83%E5%93%88%E5%93%88"
console.log(window.location.host); // "www.baidu.com"
console.log(window.location.pathname); // "/s"
console.log(window.location.protocol); // "https:"
console.log(window.location.search); // "?ie=utf-8&f=3&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=%E5%A8%83%E5%93%88%E5%93%88"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
原生js实现购物车功能
Sep 23 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 #Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 #Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 #Javascript
利用Blob进行文件上传的完整步骤
Aug 02 #Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 #Javascript
vue组件横向树实现代码
Aug 02 #Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 #Javascript
You might like
重新认识php array_merge函数
2014/08/31 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
javascript第一课
2007/02/27 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python对数据库操作
2016/03/28 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python print出共轭复数的方法详解
2019/06/25 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
文明教师事迹材料
2014/01/16 职场文书
超市创意活动方案
2014/08/15 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2014年应急工作总结
2014/12/11 职场文书
初中家长意见
2015/06/03 职场文书
推广普通话的宣传语
2015/07/13 职场文书
离婚民事起诉状
2015/08/03 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL