AngularJS $位置服务

AngularJS 中的 $location 基本上使用了 window.location 服务。 $location 用于读取或更改浏览器中的 URL，并用于在我们的页面上反映该 URL。对 URL 所做的任何更改都存储在 AngularJS 的 $location 服务中。 $location 服务中有各种方法，例如 absUrl()、url([URL])、protocol()、host()、port()、path([path])、search(search, [paramValue])、哈希（[哈希]）、替换（）和状态（[状态]）。此外，还有两个可用的事件，即 $locationChangeStart 和 $locationChangeSuccess。

现在让我们一一看看 $location 服务的一些方法。

1. absUrl() 方法：返回页面的完整路径，为只读方法。

HTML

  

    $location service
    
    

  

    Click on the button to see the current URL
    
        See URL
  
        Current URL is :: {{currentURL}}
    
  
    
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location', function ($scope, $location) {
                $scope.seeURL = function () {
                    $scope.currentURL = $location.absUrl();
                }
            }]);
    

  

输出：

2. port() 方法：也是一个只读方法，返回你当前工作的端口号。

HTML

  

    $location service
    
    

  

    
        Click on the button to see 
        the current PORT number
    
    
        See Port Number
  
        Current Port number is :: {{currentPort}}
    
  
    
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location',
                function ($scope, $location) {
                    $scope.seePort = function () {
                        $scope.currentPort = $location.port();
                    }
                }]);
    

  

输出：

3.protocol()方法：返回当前URL的当前协议，也是只读方法。

HTML

  

    $location service
    
    

  

    Click on the button to see the current Protocol
    
        See Protocol
  
        Current Protocol is :: {{currentProtocol}}
  
    
  
    
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location',
                function ($scope, $location) {
                    $scope.seeProtocol = function () {
                        $scope.currentProtocol 
                            = $location.protocol();
                    }
                }]);
    
  

  

输出：

4. host() 方法：返回当前URL的当前主机，也是一个只读方法。

HTML

  

    $location service
    
    

  

    Click on the button to see the current Host
    
        See Host
  
        Current Host is :: {{currentHost}}
    
  
    
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location', function ($scope, $location) {
                $scope.seeHost = function () {
                    $scope.currentHost = $location.host();
                }
            }]);
    

  

输出：

5、search()方法：是$location的读写方法。不带参数传递时返回 URL 的当前搜索参数，带参数传递时返回 $location 对象。

HTML

  

    $location service
    
    

  

    Click on the button to see the current Search
    
        See Search
  
        Current Search is :: {{currentSearch}}
    
  
    
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location', function ($scope, $location) {
                $scope.seeSearch = function () {
                    $location.search("website", "GeeksForGeeks");
                    $scope.currentSearch = $location.search();
                }
            }]);
    

  

输出：

6、hash()方法：是$location服务的读写方法。不带参数调用时返回当前 URL 的当前哈希值，带参数调用时返回 $location 对象。

HTML

  

    $location service
    
    

  

    Click on the button to see the current Hash Value
    
        See Hash
  
        Current Hash Value is :: {{currentHash}}
    
  
    
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location', function ($scope, $location) {
                $scope.seeHash = function () {
                    $location.hash("geeks");
                    $scope.currentHash = $location.hash();
                }
            }]);
    

  

输出：