The $location in AngularJS basically uses a 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 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.
- absUrl() Method: It returns the full path of your page and it is a read-only method.
Example 1: This example describes the absUrl() Method in AngularJS.
HTML
<!DOCTYPE html> <html>
<head>
<title>$location service</title>
<script src=
</script>
</head>
<body ng-app="locationService" style="text-align:center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS $location Service</h3>
<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:
- port() Method: It is also a read-only method that returns the port number in which you are currently working.
Example 2: This example describes the usage of the port() Method in AngularJS.
HTML
<!DOCTYPE html> <html>
<head>
<title>$location service</title>
<script src=
</script>
</head>
<body ng-app="locationService" style="text-align:center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS $location Service</h3>
<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:
- protocol() Method: It returns the current protocol of the current URL and it is also a read-only method.
Example 3: This example describes the basic usage of the protocol() Method in AngularJS.
HTML
<!DOCTYPE html> <html>
<head>
<title>$location service</title>
<script src=
</script>
</head>
<body ng-app="locationService" style="text-align:center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS $location Service</h3>
<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:
- host() Method: It returns the current host of the current URL and also it is a read-only method.
Example 4: This example describes the basic usage of the host() Method in AngularJS.
HTML
<!DOCTYPE html> <html>
<head>
<title>$location service</title>
<script src=
</script>
</head>
<body ng-app="locationService" style="text-align:center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS $location Service</h3>
<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:
- 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 the $location object.
Example 5: This example describes the basic usage of the search() Method in AngularJS.
HTML
<!DOCTYPE html> <html>
<head>
<title>$location service</title>
<script src=
</script>
</head>
<body ng-app="locationService" style="text-align:center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS $location Service</h3>
<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:
- 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.
Example 6: This example describes the basic usage of the hash() Method in AngularJS.
HTML
<!DOCTYPE html> <html>
<head>
<title>$location service</title>
<script src=
</script>
</head>
<body ng-app="locationService" style="text-align:center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS $location Service</h3>
<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: