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 can I invoke encodeURIComponent from AngularJS template in HTML?
In this article we are going to learn is how can I invoke encode URI component from angularjs template in HTML.
Each time a certain character appears in a URI, the encodeURIComponent() function replaces it with one, two, three, or four escape sequences that represent the character's UTF-8 encoding (will only be four escape sequences for characters composed of two "surrogate" characters).
Syntax
Following is the syntax for encodeURIComponent
encodeURIComponent(uriComponent)
Uricomponent
Any object, including a string, number, boolean, null, or undefined. The uriComponent is transformed to a string before encoding.
Let’s look into the following example for getting better understanding.
Example 1
In the following example we are using the encodeURIcomponent
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let uri = "https://www.tutorialspoint.com/index.htm";
let encoded = encodeURIComponent(uri);
document.getElementById("tutorial").innerHTML = encoded;
</script>
</body>
</html>
On running the above script, the output window pops up, displaying the encoded URL of the URL which we used in the above script.
Example 2
In the following example we are using the function encodeURIcomponent(string) to encode the url parameters.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("mytutorials", []);
myApp.controller("mytutorials1", function($scope) {
$scope.url1 = 'https://www.tutorialspoint.com/index.htm';
$scope.url2 = '';
$scope.encodeUrlStr = function() {
$scope.url2 = encodeURIComponent($scope.url1);
}
});
</script>
</head>
<body>
<div ng-app="mytutorials">
<div ng-controller="mytutorials1">
<button ng-click ="encodeUrlStr()" >Encode URL</button>
<br>
URL1 = {{url1}}<br>
URL2 = {{url2}}
</div>
</div>
</body>
</html>
When the script gets executed, it will generate the output consisting of url1 and url2, which is empty, along with an encodeURL button displayed on the webpage.
If the user clicks on the encodeURL button, the url which is given in url1 will get encoded and get displayed in url2.
324 Views
