AngularJS内建服务$location及其功能详解

AngularJS内建服务$location及其功能详解

AngularJS内建了许多服务，$location就是其中之一。$location服务主要用于处理浏览器的URL地址，用户可以通过操作URL地址栏中的内容改变当前的路由状态，而$location服务可以监测地址的变化并相应的改变路由状态。下面详细介绍$location服务的用法和功能。

1. $location服务的用法

要使用$location服务，首先需要在AngularJS控制器中注入它：

angular.module('myApp', [])
  .controller('myCtrl', function($location) {
     //调用$location服务
  });

在控制器中我们可以调用$location的路由方法：

• $location.path() 改变当前路由地址
• $location.hash() 设置/获取当前锚点位置
• $location.search() 设置/获取查询参数

2. $location服务的常用场景

2.1 改变当前路由地址

$location.path()方法可以改变当前路由地址。比如我们要实现一个跳转到/home页面的功能，可以这样写：

angular.module('myApp', [])
  .controller('myCtrl', function($location) {
    $location.path('/home');
  });

2.2 设置/获取当前锚点位置

$location.hash()方法用来设置或获取当前锚点位置。假设我们在当前页面上有一个文章内容的列表，用户点击某个文章标题时，我们希望页面滚动到文章内容的位置。这个时候就需要用到锚点定位。通过设置锚点，我们可以实现回到指定位置的效果：

<div ng-controller="myCtrl">
  <a href="#article1">文章1</a>
  <a href="#article2">文章2</a>
  ...

  <p id="article1">文章1内容</p>
  <p id="article2">文章2内容</p>
  ...
</div>

我们可以给锚点添加事件监听，用户点击列表中的文章标题时，页面将自动滚动到对应的文章内容位置：

angular.module('myApp', [])
  .controller('myCtrl', function($location, $anchorScroll) {
    $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
    }
  });

通过监听锚点的变化，可以实现页面内的局部刷新。

2.3 设置/获取查询参数

$location.search()方法用来设置/获取查询参数。假设我们有一个搜索功能，需要将搜索关键词作为查询参数传递到后端：

angular.module('myApp', [])
  .controller('myCtrl', function($location) {
    $scope.search = function() {
      //获取搜索关键词
      var keyword = $scope.keyword;
      //将关键词作为查询参数传递到后端
      $location.search('q', keyword);
    }
  });

以上就是$location服务常用的三个场景。通过这些场景的介绍，相信大家已经能更好地掌握$location服务的用法和功能了。