详解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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
js实现随机点名小功能
Aug 17 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python开发编码规范
2006/09/08 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
如何利用python读取micaps文件详解
2020/10/18 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
吃空饷专项治理工作实施方案
2014/03/04 职场文书
英文请假条
2014/04/11 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python