详解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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
js 图片等比例缩放代码
May 13 Javascript
jquery 插件学习(四)
Aug 06 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
javascript每日必学之继承
Feb 23 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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求最大子序列和的算法实现
2011/06/24 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
详解在Python和IPython中使用Docker
2015/04/28 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python爬虫增加访问量的方法
2019/08/22 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
临床医学应届生求职信
2013/11/06 职场文书
高中美术教学反思
2014/01/19 职场文书
犯错检讨书
2014/02/21 职场文书
文明市民先进事迹
2014/05/15 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
清明节随笔
2015/08/15 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
信息技术研修心得体会
2016/01/08 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers