Skip to content
Related Articles

Related Articles

Improve Article

AngularJS $location Service

  • Last Updated : 11 Jun, 2021

The $location in AngularJS basically uses window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in the AngularJS. There are various methods in the $location service such as absUrl(), url([URL]), protocol(), host(), port(), path([path]), search(search, [paramValue]), hash([hash]), replace(), and state([state]). Also, there are two events available i.e. $locationChangeStart and $locationChangeSuccess.

Now let us see some methods one by one of $location service.

1. absUrl() Method: It returns the full path of your page and it is a read-only method.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>$location service</title>
    <script src=
    </script>
</head>
  
<body ng-app="locationService">
    <h4>Click on the button to see the current URL</h4>
    <div ng-controller="locationServiceController">
        <button ng-click="seeURL()">See URL</button>
  
        <p>Current URL is :: {{currentURL}}</p>
    </div>
  
    <script>
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location', function ($scope, $location) {
                $scope.seeURL = function () {
                    $scope.currentURL = $location.absUrl();
                }
            }]);
    </script>
</body>
  
</html>

Output:



2. port() Method: It is also a read-only method that returns the port number in which you are currently working.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>$location service</title>
    <script src=
    </script>
</head>
  
<body ng-app="locationService">
    <h4>
        Click on the button to see 
        the current PORT number
    </h4>
    <div ng-controller="locationServiceController">
        <button ng-click="seePort()">See Port Number</button>
  
        <p>Current Port number is :: {{currentPort}}</p>
    </div>
  
    <script>
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location',
                function ($scope, $location) {
                    $scope.seePort = function () {
                        $scope.currentPort = $location.port();
                    }
                }]);
    </script>
</body>
  
</html>

Output:

3. protocol() Method: It returns the current protocol of the current URL and it is also a read-only method.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>$location service</title>
    <script src=
    </script>
</head>
  
<body ng-app="locationService">
    <h4>Click on the button to see the current Protocol</h4>
    <div ng-controller="locationServiceController">
        <button ng-click="seeProtocol()">See Protocol</button>
  
        <p>Current Protocol is :: {{currentProtocol}}</p>
  
    </div>
  
    <script>
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location',
                function ($scope, $location) {
                    $scope.seeProtocol = function () {
                        $scope.currentProtocol 
                            = $location.protocol();
                    }
                }]);
    </script>
  
</body>
  
</html>

Output:

4. host() Method: It returns the current host of the current URL and also it is a read-only method.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>$location service</title>
    <script src=
    </script>
</head>
  
<body ng-app="locationService">
    <h4>Click on the button to see the current Host</h4>
    <div ng-controller="locationServiceController">
        <button ng-click="seeHost()">See Host</button>
  
        <p>Current Host is :: {{currentHost}}</p>
    </div>
  
    <script>
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location', function ($scope, $location) {
                $scope.seeHost = function () {
                    $scope.currentHost = $location.host();
                }
            }]);
    </script>
</body>
  
</html>


 



Output:

5. search() Method: It is a read and writes method of $location. It returns the current search parameters of the URL when passed without parameters and when passed with parameters it returns $location object.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>$location service</title>
    <script src=
    </script>
</head>
  
<body ng-app="locationService">
    <h4>Click on the button to see the current Search</h4>
    <div ng-controller="locationServiceController">
        <button ng-click="seeSearch()">See Search</button>
  
        <p>Current Search is :: {{currentSearch}}</p>
    </div>
  
    <script>
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location', function ($scope, $location) {
                $scope.seeSearch = function () {
                    $location.search("website", "GeeksForGeeks");
                    $scope.currentSearch = $location.search();
                }
            }]);
    </script>
</body>
  
</html>

Output:

6. hash() Method: It is a read and writes method of $location service. It returns the current hash value of the current URL when called without parameters and when called with parameters it returns the$location object.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>$location service</title>
    <script src=
    </script>
</head>
  
<body ng-app="locationService">
    <h4>Click on the button to see the current Hash Value</h4>
    <div ng-controller="locationServiceController">
        <button ng-click="seeHash()">See Hash</button>
  
        <p>Current Hash Value is :: {{currentHash}}</p>
    </div>
  
    <script>
        var app = angular.module('locationService', []);
        app.controller('locationServiceController',
            ['$scope', '$location', function ($scope, $location) {
                $scope.seeHash = function () {
                    $location.hash("geeks");
                    $scope.currentHash = $location.hash();
                }
            }]);
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :