AngularJS $location Service - GeeksforGeeks

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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:
AngularJS-API
AngularJS-Directives
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?