Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Encode/Decode URL using AngularJS ?
Handling URLs, which are used to move between various web pages and parts, is a fundamental component of web development. Spaces, question marks, and ampersands, among other special characters, can cause problems in URLs when transmitted over the internet. For instance, certain web servers may behave unexpectedly if a URL contains a space, supposing it to be a separate command or argument.
AngularJS is a popular JavaScript framework used for building single−page applications. It provides several built−in methods for URL encoding and decoding, making it easy for developers to handle URLs in their applications. We will explore different methods for encoding and decoding URLs in AngularJS and demonstrate their practical use in real−world scenarios.
Approach 1: Encoding
We can encode an URL using encodeURIComponent(). This function will enable us to encode special characters present in the URL.
Syntax
Var encodedURL = encodeURIComponent("")
The function will translate the unprintable URL in an accepted format universally by the web browsers and servers.
Algorithm
Step 1: Import AngularJS minified JS library from CDN.
Step 2: Wrap the code which requires angularJS functionality with ng−controller div attribute.
Step 3: Wrap the whole application under ng−app.
Step 4: Encode the URL using encodeURIComponent() function and call the controller function by binding ng−click to a button with a user defined function.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encode/Decode URL</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
</head>
<body ng-app="app">
<div ng-controller="controller">
<h1>Enter the URL you want to encode:</h1>
<input type="text" id="url" />
<button type="submit" ng-click="encodeUrl()">Encode</button>
<h3>The Encoded URL is:</h3>
<h5 id="encodedUrl">{{url2}}</h5>
</div>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function($scope) {
$scope.url2 = '';
$scope.encodeUrl = function() {
$scope.url1 = document.getElementById("url").value;
$scope.url2 = encodeURIComponent($scope.url1);
}
});
</script>
<style>
body{
background-color: white;
padding-left: 20%;
padding-right: 20%;
}
h1{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: xx-large;
background-color:aquamarine;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
border-radius: 15px;
}
input[type="text"]{
padding-top: 15px;
padding-bottom: 15px;
width: 80%;
font-size: 25px;
padding-left: 10px;
border-radius: 15px;
}
button{
padding-top: 15px;
padding-bottom: 15px;
width: 17%;
font-size: 25px;
}
h5{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: x-large;
background-color:aquamarine;
min-height: 40px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
border-radius: 15px;
}
</style>
</body>
</html>
Approach 2: Decoding URL
Decoding refers to the process of replacing escape based sequence URL to normal special character based URL. To achieve this using AngularJS we have decodeURIComponentI() function that takes an encoded URL as an input and returns a decoded sequence for the same.
Syntax
Var decodedURL = decodeURIComponent("")
In this snippet decodeURIComponent converts “<encoded−URL>” to normal URL with special characters.
Algorithm
Step 1: Import AngularJS minified JS library from CDN.
Step 2: Wrap the code which requires angularJS functionality with ng−controller div attribute.
Step 3: Wrap the whole application under ng−app.
Step 4: Decode the URL using decodeURIComponent() function and call the controller function by binding ng−click to a button with user defined function.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encode/Decode URL</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
</head>
<body ng-app="app">
<div ng-controller="controller">
<h1>Enter the encoded URL you want to decode:</h1>
<input type="text" id="url" />
<button type="submit" ng-click="encodeUrl()">Decode</button>
<h3>The decoded URL is:</h3>
<h5 id="encodedUrl">{{url2}}</h5>
</div>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function($scope) {
$scope.url2 = '';
$scope.encodeUrl = function() {
$scope.url1 = document.getElementById("url").value;
$scope.url2 = decodeURIComponent($scope.url1);
}
});
</script>
<style>
body{
background-color: white;
padding-left: 20%;
padding-right: 20%;
}
h1{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: xx-large;
background-color:aquamarine;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
border-radius: 15px;
}
input[type="text"]{
padding-top: 15px;
padding-bottom: 15px;
width: 80%;
font-size: 25px;
padding-left: 10px;
border-radius: 15px;
}
button{
padding-top: 15px;
padding-bottom: 15px;
width: 17%;
font-size: 25px;
}
h5{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: x-large;
background-color:aquamarine;
min-height: 40px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
border-radius: 15px;
}
</style>
</body>
</html>
Conclusion
In order to guarantee that the apps run correctly, web developers must be knowledgeable of URL encoding and decoding strategies. URL encoding and decoding offers a secure and reliable solution to manage many special characters that can be found in URLs and create problems when communicated over the internet.
AngularJS is used to create single−page apps. One can guarantee that your users will have a fluid experience and trouble−free navigation across your AngularJS applications by implementing these approaches.
553 Views
