详解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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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网页后退不再出现过期
2007/03/08 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
header导出Excel应用示例
2014/01/24 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
Python实现二分查找算法实例
2015/05/26 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python实现猜单词小游戏
2020/05/22 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python可迭代对象操作示例
2019/05/07 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
董事长职责范文
2013/11/08 职场文书
空乘英文求职信
2014/04/13 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
答谢词范文
2015/01/05 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis