Understanding $location Service In AngularJS

Introduction

The $location is very useful service in AngularJS to read or change the URL in the browser. It use "window.location" in base and make URL available to our application. Whatever the changes are made in the URL in the address bar are reflected into $ location service and Changes made by $location are reflected into the browser address bar.

The $location service exposes the current URL in the address bar, so that we can watch, observe and change the URL. It also synchronizes the URL with browser when user click on back or forward button, change URL address bar manually or click any link on page.

Following set of methods supported by $location service

url

It is read/ writes method. It returns url of address bar when called without parameter. It takes one parameter. When we pass the parameter AngularJs try to change the address of browser.

Example:

Output

If current path in address bar is "http://abc.com/#test/location/url", this method will return "test/location/url".

absUrl

This is read only method. This returns the full url path with all segments.

Example:

HTML: 

<h4>$location Service Example</h4>
<div ng-controller="HelloController">
    <div>
        Current absolute URL: {{currentURL}}
    </div>
    <br />
</div>

Controller:

var app = angular.module("app", []);
app.controller("HelloController", function ($scope, $location) {
    $scope.currentURL = $location.absUrl();
});

Output:

If current path in address bar is "http://localhost:42382/TestAgularJs.html ", this method will return full path url i.e.”http://localhost:42382/TestAgularJs.html".

 

 

port

This is read only method. It returns the port Id of current url.

Example:

HTML:

<h4>$location Service Example</h4>
<div ng-controller="HelloController">
    <div>
        Current port used by the application URL: {{currentPort}}
    </div>
    <br />
</div>

Controller:

var app = angular.module("app", []);
app.controller("HelloController", function ($scope, $location) {
    $scope.currentPort = $location.port();
});

 Output:

 

 

protocol

This is read only method. It returns protocol of current url.

Example:

HTML:

<h4>$location Service Example</h4>
<div ng-controller="HelloController">
    <div>
        Current Protocol: {{currentProtocol}}
    </div>
    <br />
</div>

Controller:

app.controller("HelloController", function ($scope, $location) {
    $scope.currentProtocol = $location.protocol();
});

Output:

 

 

host

This is read only method. It returns host of current url. It only return host name whereas non-angular version location.host returns host name along with post id.

Example:

HTML: 

<h4>$location Service Example</h4>
<div ng-controller="HelloController">
    <div>
        Current Host: {{currentHost}}
        <br />
        Current Host (using non-Angular method): {{nonAngularHost}}
    </div>
    <br />
</div>

Controller:

var app = angular.module("app", []);
app.controller("HelloController", function ($scope, $location) {
    $scope.currentHost = $location.host();
    $scope.nonAngularHost = location.host;
});

Output: 

 

 

path

This is read / writes method. It takes optional parameter. It returns current url path when called without parameter and when pass url as a parameter, it change path. It should always start with forward slash (/).

Example: 

var currentPath = $location.path();

Output:

If current path in address bar is "http://abc.com/#test/location/path?test=new", this method will return "test/location/path".

search

This is read / writes method. It returns search part of current url as obect when called without parameter. When call with parameter, it change search part with parameter and return $location object.

Example:

HTML: 

<h4>$location Service Example</h4>
<div ng-controller="HelloController">
    <div>
        Current search: {{currentSearch}}
        <br />
        <br />
        <button ng-click="changeValue()">change value</button>
        <br />
        <br />
        New Value : {{newSearchValue}}
    </div>
    <br />
</div>

Controller:  

var app = angular.module("app", []);
app.controller("HelloController", function ($scope, $location) {
    $scope.currentSearch = $location.search();
    $scope.changeValue = function () {
        $location.search("name", "tejas");
        $scope.newSearchValue = $location.search();
    }
});

 

Output:

 

 

hash

This is read / writes method. It returns hash part of current url when called without parameter. When call with parameter, it change hash part with parameter and return $location object.

Example:

HTML:  

<h4>$location Service Example</h4>
<div ng-controller="HelloController">
    <div>
        Current hash value: {{currentHash}}
        <br />
        <br />
        <button ng-click="changeHashValue()">change value</button>
        <br />
        <br />
        New Value : {{newHashValue}}
    </div>
</div>

Controller:

var app = angular.module("app", []);
app.controller("HelloController", function ($scope, $location) {
    $scope.currentHash = $location.hash();
    $scope.changeHashValue = function () {
        $location.hash("NewHash");
        $scope.newHashValue = $location.hash();
    }
});

Output: 

 

 

state

This is read / writes method. It returns history state when called without parameter. When call with parameter, it change history state with parameter and return $location object. This method is using internal HTML5 History API, so it is supported only in HTML5 mode.

replace

It replace all changes to the $location with the current history record. It is not adding new value in history. Following set of Events supported by $location service

$locationChangeStart

This event is broadcasted before a URL will change. The new state and old state parameter defined in HTML 5 mode only. This event has following parameters

• angularEvent: It is Synthetic event object.
• newUrl: New URL
• oldUrl: This is optional parameter. This contains old URL.
• newState: This is optional parameter. This contains new history state object
• oldState: This is optional parameter. This contains old History state object which was before it was changed.

 $locationChangeSuccess

This event is broadcasted after a URL was changed. This event has same parameter or argument as $locationChangeStart event.

Summary

This article will help you to understand location service in AngularJS.

References

https://docs.angularjs.org/api/ng/service/$location