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

 更新时间:2018年08月02日 11:41:05   作者:半指温柔乐  
这篇文章主要介绍了详解 Angular中通过$location获取地址栏的参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取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-ui-BootStrap组件的解释以及使用

    详解Angular-ui-BootStrap组件的解释以及使用

    这篇文章主要介绍了详解Angular-ui-BootStrap组件的解释以及使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • angular.js实现列表orderby排序的方法

    angular.js实现列表orderby排序的方法

    今天小编就为大家分享一篇angular.js实现列表orderby排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angularjs基础知识及示例汇总

    Angularjs基础知识及示例汇总

    本文给大家总结了一些angularjs的基础知识及相关示例,分享给大家,希望能对大家有所帮助。
    2015-01-01
  • 使用angular写一个hello world

    使用angular写一个hello world

    这篇文章主要介绍了使用angular写一个hello world的方法及示例,需要的朋友可以参考下
    2015-01-01
  • ionic+AngularJs实现获取验证码倒计时按钮

    ionic+AngularJs实现获取验证码倒计时按钮

    本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。
    2017-04-04
  • angular 服务的单例模式(依赖注入模式下)详解

    angular 服务的单例模式(依赖注入模式下)详解

    这篇文章主要介绍了angular 服务的单例模式(依赖注入模式下)详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Angularjs上传图片实例详解

    Angularjs上传图片实例详解

    上传图片需要引入插件ngFileUpload,使用bower安装方法,下面通过本文给大家介绍Angularjs上传图片实例详解,希望对大家有所帮助
    2017-08-08
  • AngularJS $http模块POST请求实现

    AngularJS $http模块POST请求实现

    本篇文章主要介绍了AngularJS $http模块POST请求实现,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 深入浅析AngularJS中的module(模块)

    深入浅析AngularJS中的module(模块)

    我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ,感兴趣的朋友一起学习吧
    2016-01-01
  • 详解Angular.js中$http拦截器的介绍及使用

    详解Angular.js中$http拦截器的介绍及使用

    拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期,下面这篇文章主要给大家介绍了关于Angular.js中$http拦截器的介绍及使用的相关资料,文中介绍的非常详细,需要的朋友可以参考学习。
    2017-07-07

最新评论