详解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"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • angularjs性能优化的方法

    angularjs性能优化的方法

    这篇文章主要介绍了angularjs性能优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 深入学习AngularJS中数据的双向绑定机制

    深入学习AngularJS中数据的双向绑定机制

    这篇文章主要介绍了AngularJS中数据的双向绑定机制,双向绑定使得HTML中呈现的view与AngularJS中的数据一致,是Angular的重要特性之一,需要的朋友可以参考下
    2016-03-03
  • angularjs select 赋值 ng-options配置方法

    angularjs select 赋值 ng-options配置方法

    下面小编就为大家分享一篇angularjs select 赋值 ng-options配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • angular2实现统一的http请求头方法

    angular2实现统一的http请求头方法

    今天小编就为大家分享一篇angular2实现统一的http请求头方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • angular4中*ngFor不能对返回来的对象进行循环的解决方法

    angular4中*ngFor不能对返回来的对象进行循环的解决方法

    今天小编就为大家分享一篇angular4中*ngFor不能对返回来的对象进行循环的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angular 多级路由实现登录页面跳转(小白教程)

    Angular 多级路由实现登录页面跳转(小白教程)

    这篇文章主要介绍了Angular 多级路由实现登录页面跳转(小白教程),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 创建你的第一个AngularJS应用的方法

    创建你的第一个AngularJS应用的方法

    这篇文章主要介绍了创建你的第一个AngularJS应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下
    2015-06-06
  • 实践中学习AngularJS表单

    实践中学习AngularJS表单

    表单是最常用的一种组建。在Angular.js中,其实并没有单独的为表单添加多少特殊功能。但是,利用Angular.js框架本身的特点,可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的
    2016-03-03
  • AngularJS框架的ng-app指令与自动加载实现方法分析

    AngularJS框架的ng-app指令与自动加载实现方法分析

    这篇文章主要介绍了AngularJS框架的ng-app指令与自动加载实现方法,结合实例形式分析了ng-app指令的功能及自动加载机制的实现技巧,需要的朋友可以参考下
    2017-01-01
  • AngularJS表单基本操作

    AngularJS表单基本操作

    这篇文章主要为大家详细介绍了AngularJS表单基本操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论