如何使用 AngularJS 对 URL 进行编码/解码?
处理 URL 是 Web 开发的基本组成部分，URL 用于在各个网页和组件之间移动。空格、问号、& 符号以及其他特殊字符在互联网传输时可能会导致 URL 出现问题。例如，如果 URL 中包含空格，某些 Web 服务器可能会将其误认为是单独的命令或参数，从而导致异常行为。
AngularJS 是一个流行的 JavaScript 框架，用于构建单页应用程序。它提供了多种内置的 URL 编码和解码方法，使开发人员可以轻松地在其应用程序中处理 URL。我们将探索 AngularJS 中对 URL 进行编码和解码的不同方法，并演示它们在实际场景中的实际应用。
方法 1:编码
我们可以使用 encodeURIComponent() 对 URL 进行编码。此函数使我们能够对 URL 中的特殊字符进行编码。
语法
Var encodedURL = encodeURIComponent("")
此函数将把无法打印的 URL 转换为 Web 浏览器和服务器通用的格式。
算法
步骤 1: 从 CDN 导入 AngularJS 压缩版 JS 库。
步骤 2: 使用 ng-controller 的 div 属性包装需要使用 angularJS 功能的代码。
步骤 3: 将整个应用程序包装在 ng-app 下。
步骤 4: 使用 encodeURIComponent() 函数对 URL 进行编码，并通过将 ng-click 绑定到按钮来调用控制器函数。用户定义的函数。
示例
<!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>
方法 2:解码 URL
解码是指将基于转义序列的 URL 替换为基于特殊字符的普通 URL 的过程。为了使用 AngularJS 实现此目的，我们提供了 decodeURIComponentI() 函数，该函数接受已编码的 URL 作为输入，并返回其解码后的序列。
语法
Var decodedURL = decodeURIComponent("")
在此代码片段中，decodeURIComponent 将"<encoded-URL>"转换为转换为包含特殊字符的普通 URL。
算法
步骤 1: 从 CDN 导入 AngularJS 压缩版 JS 库。
步骤 2: 使用 ng-controller 的 div 属性包装需要 angularJS 功能的代码。
步骤 3: 将整个应用程序包装在 ng-app 下。
步骤 4: 使用 decodeURIComponent() 函数解码 URL，并通过将 ng-click 绑定到具有用户定义函数的按钮来调用控制器函数。
示例
<!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>
结论
为了确保应用程序正常运行，Web 开发人员必须了解 URL 编码和解码策略。URL 编码和解码提供了一种安全可靠的解决方案，可以管理 URL 中可能存在的许多特殊字符，这些字符在互联网传输过程中可能会造成问题。
AngularJS 用于创建单页应用程序。通过实施这些方法，可以确保您的用户在 AngularJS 应用程序中拥有流畅的体验和无故障的导航。
