极客教程如何使用AngularJS对URL进行编码/解码
在这篇文章中，我们将看到使用AngularJS对URL进行编码/解码的机制，同时了解完成给定任务的不同方法，并将通过插图来理解它。一个URL指定了一个资源和它的访问协议。
URL编码：URL编码是一种将不可打印或保留的字符翻译成网络浏览器和网络服务器普遍接受的格式的方法，其中编码信息可以落实到统一资源定位器（URLs）、统一资源名称（URNs）、统一资源标识符（URIs）。在URL中选择的字符，可以用一个以上的字符三联体去除，其中包含百分比字符和两个十六进制数字。
方法：方法是使用encodeURIComponent()方法，这将有助于对URI的某些部分或组件进行编码，其中该方法对特殊字符进行编码。在第一个例子中，URL(‘https://ide.geeksforgeeks.org/tryit.php’) 被编码，在第二个例子中，URL(‘https://www.geeksforgeeks.org’) 被编码。
例子1：这个例子描述了使用encodeURIComponent()方法对URL进行编码。
<!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>
输出:
示例2：本示例描述了使用encodeURIComponent()方法对URL进行编码。
<!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>
输出:
解码URL： URL解码指的是将”%-based escape sequence”字符替换为编码URL中的正常表示的过程。在AngularJS的帮助下，URL可以很容易地被编码或解码。给出一个编码的URL，任务是使用AngularJS解码编码的URL。
方法：的方法是使用decodeURIComponent()方法对URL进行解码。在第一个例子中，URL(‘https%3A%2F%2Fide.geeksforgeeks.org%2Ftryit.php’)_被解码，在第二个例子中，URL(‘https%3A%2F%2Fwww.geeksforgeeks.org’)被解码。
例子3：这个例子描述了使用decodeURIComponent()方法对URL进行解码。
<!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>
输出:
例子4：这个例子描述了使用decodeURIComponent()方法对URL进行解码。
<!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>
输出:
