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.
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
Property | Description |
---|---|
$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 |
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.
Following is the example of using $location service in angularjs applications.
<!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.
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.