How to encode/decode URL using AngularJS ? - GeeksforGeeks

16 Aug, 2021
Encode URL
Given an URL and the task is to encode the URL in AngularJS.
Approach: The approach is to use the encodeURIComponent() method to encode the URL. 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:
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>     <p>        How to encode URL in AngularJS    </p>     <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:
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>     <p>        How to encode URL in AngularJS    </p>     <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
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 1:
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>     <p>        How to decode URL in AngularJS    </p>     <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 2:
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>     <p>        How to decode URL in AngularJS    </p>     <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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sumitgumber28
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property