How to encode/decode URL using AngularJS ?

Last Updated : 01 Aug, 2022

In this article, we will see the mechanism to encode/decode URL using AngularJS, along with knowing the different methods available to accomplish the given task, & will understand it through the illustration. A URL specifies a resource and its access protocol.

Encode URL: URL Encoding is a way to translate unprintable or reserved characters in an accepted format universally by the web browsers & the web servers, where the encoded information can be implemented to Uniform Resource Locators (URLs), Uniform Resource Names (URNs), Uniform Resource Identifiers (URIs). The character that is selected in the URL, can be removed with more than one character triplets, which contains percent character and two hexadecimal digits.

Approach: The approach is to use the encodeURIComponent() method that will help to encode some parts or components of URI, where this method encodes the special characters. In the first example, the URL(‘https://ide.geeksforgeeks.org/tryit.php’) is encoded and in the second example, the URL(‘https://www.geeksforgeeks.org’) is encoded.

Example 1: This example describes the encoding of URL using the encodeURIComponent() method.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.url1 = 'https://ide.geeksforgeeks.org/tryit.php';
            $scope.url2 = '';
            $scope.encodeUrl = function() {
                $scope.url2 = encodeURIComponent($scope.url1);
            }
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3> How to encode URL in AngularJS </h3>
    <div ng-app="app">
        <div ng-controller="controller"> URL = '{{url1}}'
            <br><br>
            <button ng-click="encodeUrl()">
                 Click here
            </button>
            <br><br> Encoded URL = '{{url2}}' 
        </div>
    </div>
</body>
</html>

Output:

Example 2: This example describes the encoding of URL using the encodeURIComponent() method.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.url1 = 'https://www.geeksforgeeks.org';
            $scope.url2 = '';
            $scope.encodeUrl = function() {
                $scope.url2 = encodeURIComponent($scope.url1);
            }
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to encode URL in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller"> 
            URL = '{{url1}}'<br><br>
            <button ng-click="encodeUrl()">
                 Click here 
            </button><br><br> 
            Encoded URL = '{{url2}}' 
        </div>
    </div>
</body>
</html>

Output:

Decode URL: URL Decoding refers to the process of replacing the “%-based escape sequence” characters with their normal representation in the encoded URLs. URL can easily be encoded or decoded with the help of AngularJS. Given an encoded URL and the task is to decode the encoded URL using AngularJS.

Approach: The approach is to use the decodeURIComponent() method to decode the URL. In the first example, the URL(‘https%3A%2F%2Fide.geeksforgeeks.org%2Ftryit.php’) is decoded and in the second example, the URL(‘https%3A%2F%2Fwww.geeksforgeeks.org’) is decoded.

Example 3: This example describes the decoding of URL using the decodeURIComponent() method.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.url1 = 
              'https%3A%2F%2Fide.geeksforgeeks.org%2Ftryit.php';
            $scope.url2 = '';
            $scope.decodeUrl = function() {
                $scope.url2 = decodeURIComponent($scope.url1);
            }
        });
    </script>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to decode URL in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller"> 
            URL = '{{url1}}'<br><br>
            <button ng-click="decodeUrl()">
                 Click here 
            </button><br><br> 
                Decoded URL = '{{url2}}'
        </div>
    </div>
</body>
</html>

Output:

Example 4: This example describes the decoding of URL using the decodeURIComponent() method.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.url1 = 'https%3A%2F%2Fwww.geeksforgeeks.org';
            $scope.url2 = '';
            $scope.decodeUrl = function() {
                $scope.url2 = decodeURIComponent($scope.url1);
            }
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to decode URL in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller"> URL =
            '{{url1}}'<br><br>
            <button ng-click="decodeUrl()">
                 Click here 
            </button><br><br>
                Decoded URL = '{{url2}}' 
        </div>
    </div>
</body>
</html>