Open In App

How to get the current URL using AngularJS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

 



Last Updated : 08 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads