How to encode/decode URL using AngularJS ?
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 = $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:
.png)
.png)