How to get the current URL using AngularJS ?
In this article, we will see how to get the current URL with the help of AngularJS, along with knowing its basic implementation through the examples. This task can be accomplished in 2 ways, i.e., by implementing the $location.absURL() method to get the complete URL of the current page, & the 2nd-way implements the split() method that is appended with the absURL() method to get the domain name of the URL. We will explore both approaches for getting the current URL using AngularJS.
$location.absURL() method: The $location service facilitates to parse of the URL in the address bar & makes the URL avail to an application. The absUrl() Method returns the full path of your page and it is a read-only method.
Syntax:
$location.absURL();
Example 1: in this example, we are using the $location.absURL() method to get the complete URL of the current page.
HTML
<!DOCTYPE HTML><html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope, $location) { $scope.url = ''; $scope.getUrl = function () { $scope.url = $location.absUrl(); }; }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Get current URL in angularJS</h3> <div ng-app="app"> <div ng-controller="controller"> <p>Url = {{url}}</p> <input type="button" value="Click to get URL" ng-click="getUrl()"> </div> </div></body></html> |
Output:
split() method: This method can also be used to get the domain name of the URL by appending it after the absURL() method.
Example 2: Similar to the previous example but using the split() method to get the domain name of the URL.
HTML
<!DOCTYPE HTML><html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function ($scope, $location) { $scope.url = ''; $scope.getUrl = function () { // Will change the current url to // ide.geeksforgeeks.org $scope.url = $location .absUrl().split('/')[2];; }; }); </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Get current URL in angularJS </h3> <div ng-app="app"> <div ng-controller="controller"> <p>Url = {{url}}</p> <input type="button" value="Click to get URL" ng-click="getUrl()"> </div> </div></body></html> |
Output:
Please Login to comment...