AngularJS $location Service (absUrl, host, url, protocol, port, path) with Example

Here we will learn what is $location service in angularjs, use of $location service, different methods of $location service and how to use $location service in angularjs applications to get information related to current web page.

AngularJS $location Service

In angularjs $location service is same as window.location in javascript and it’s having extra features which is used to get information related to url of current web page. 

 

By using $location service in angularjs we can get information like full url of current web page, part of url of web page, protocol of web page, host information of current url and port of current url.

 

In angularjs $location service is having various methods available those are

 

PropertyDescription
$location.absUrl() We can get full url of current web page
$location.url() It returns url without base prefix
$location.protocol() It returns protocol of current web page url
$location.host() It returns host of current web page url
$location.port() By using this we can get port of current url
$location.path() It returns path of current url without any parameters
$location.search() Returns search part of current url when called without any parameter
$location.hash() Returns hash part of current url without any parameters

Syntax of AngularJS $location Service

Following is the syntax of using $location service in angularjs applications.

 

var app = angular.module('locationApp', []);

app.controller('locationCtrl', function ($scope, $location) {

$scope.weburl = $location.absUrl();

});

If you observe above syntax we are trying to get complete url of current web page using $location.absUrl() method.

 

Note: In above syntax we passed $location as argument to the controller in angularjs. To use service in controller we need to pass $location as parameter.

 

We will see simple example of using $location service in angularjs application.

AngularJS $location Service Example

Following is the example of using $location service in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs $location Service with Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('locationApp', []);

app.controller('locationCtrl', function ($scope, $location) {

$scope.weburl = $location.absUrl();

$scope.urlhost = $location.host();

$scope.urlport = $location.port();

$scope.urlprotocol = $location.protocol();

});

</script>

</head>

<body>

<div ng-app="locationApp" ng-controller="locationCtrl">

<p>Url of Webpage: {{weburl}}</p>

<p>Host of Webpage: {{urlhost}}</p>

<p>Port of Webpage: {{urlport}}</p>

<p>Protocol of Webpage: {{urlprotocol}}</p>

</div>

</body>

</html>

Now we will run and see the output of above angularjs $location service application.

Output of AngularJS $location Service Example

Following is the result of our angularjs application with $location service with different methods.

 

Url of Webpage: http://localhost:3036/AngularSamples/AngularjsSamples.aspx

 

Host of Webpage: localhost

 

Port of Webpage: 3036

 

Protocol of Webpage: http

 

 This is how we can use $location service in angularjs to get information related to current web page based on our requirements.