Open In App
Related Articles

How to encode/decode URL using AngularJS ?

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

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>

                    

Output:

 


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials