Angular中通过$location获取地址栏的参数详解
Angular中通过$location获取url中的参数
最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取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"
Angular中通过$location获取地址栏的参数详解的更多相关文章
- window.location获取url各项参数详解
window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...
- [JS]window.location获取url各项参数详解
window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...
- Arison [JS]window.location获取url各项参数详解
https://www.cnblogs.com/Arison/p/5286368.html 对于这样一个URL代码如下 复制代码 http://www.php230.com :80/fisker/po ...
- 连接池中的maxIdle,MaxActive,maxWait等参数详解
转: 连接池中的maxIdle,MaxActive,maxWait等参数详解 2017年06月03日 15:16:22 阿祥小王子 阅读数:6481 版权声明:本文为博主原创文章,未经博主允许不得 ...
- linux中与Oracle有关的内核参数详解
工作当中遇到oracle运行时CPU占用率达到90%以上,调小以下参数值后恢复正常. fs.file-max = 65536 net.core.rmem_default=262144 net.core ...
- angular中通过$location获取路径(参数)的写法
以下获取与修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 为例 [一]获取 (不修改URL) //1.获取当前完整 ...
- 熬夜总结vue3中setUp函数的2个参数详解
1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接 ...
- C#中static void Main(string[] args) 参数详解
学习C#编程最常见的示例程序是在控制台应用程序中输出Hello World! using System; namespace DemoMainArgs { class Program { static ...
- Android 调用图库选择图片实现和参数详解
//选择图片,调用图库 bt4.setOnClickListener(new OnClickListener() { @Override public void o ...
随机推荐
- Python2.7-浙江省实时天气爬取
先对中国天气网的实时天气数据进行了研究,数据在http://www.weather.com.cn/weather1d/101010100.shtml中,可以通过城市代码进行爬取,但实况数据是用JS动态 ...
- day70
昨日回顾:1 虚拟环境 -1 pycharm里创建 -2 用命令串讲2 视图层: 1 Request对象---GET,POST,method,body,FILES,META,path(只是路径),ge ...
- linux中原子操作实现方式
原子操作提供了指令原子执行,中间没有中断.就像原子被认为是不可分割颗粒一样,原子操作(atomic operation)是不可分割的操作. 如下面简单的例子: Thread 1 ...
- 2017-2018-2 20155315《网络对抗技术》Exp9 :Web安全基础
实验目的 理解常用网络攻击技术的基本原理. 教程1 教程2 教程3 实验内容 SQL注入攻击 XSS攻击 CSRF攻击 Webgoat前期准备 从GitHub上下载jar包 拷贝到本地,并使用命令ja ...
- 20155331《网络对抗技术》Exp4:恶意代码分析
20155331<网络对抗技术>Exp4:恶意代码分析 实验过程 计划任务监控 在C盘根目录下建立一个netstatlog.bat文件(先把后缀设为txt,保存好内容后记得把后缀改为bat ...
- Python+Matplotlib制作动画
注: 在"实验设计与数据处理"的课后作业中,有一个数据可视化的作业,利用课程上学习的某种方法找一个二维函数的最大值,并将这个寻找的过程可视化.在作业里面利用了Matplotlib的 ...
- WPF编程,通过Path类型制作沿路径运动的动画另一种方法。
原文:WPF编程,通过Path类型制作沿路径运动的动画另一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/d ...
- AngularJS+bootstrap-switch 实现开关控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- POJ 1789&&2485&&1258&&3026
这个真的太水了——MST专辑. 如果不会MST的两种算法的同学可以出门右转了. 大致讲一下,第一题我是用Prim+堆优化的(毕竟点比较多),后面三题用的是Kruskal(习惯打,而且并查集常数实在小) ...
- eclipse + maven + org.glassfish.jersey 创建 webapi
org.glassfish.jersey 和 com.sun.jersey 的区别是,jersy version 2 之前是 com.sun.jersy, 之后改名为 org.glassfish.je ...