AngularJS 如何对URL进行编码/解码

处理URL是Web开发的基本组成部分，用于在不同的网页和部分之间移动。在通过互联网传输时，空格、问号、和&等特殊字符可能会导致URL出现问题。例如，如果URL包含空格，某些Web服务器可能会出现意外行为，将其视为单独的命令或参数。

AngularJS是一种流行的JavaScript框架，用于构建单页应用程序。它提供了几种内置方法以进行URL编码和解码，使开发人员能够轻松处理应用程序中的URL。我们将探讨在AngularJS中对URL进行编码和解码的不同方法，并展示它们在实际场景中的实际用途。

编码URL

我们可以使用encodeURIComponent()函数对URL进行编码。该函数将使我们能够编码URL中的特殊字符。

语法

Var encodedURL = encodeURIComponent("")

该功能将以一种被网络浏览器和服务器普遍接受的格式翻译不可打印的URL。

步骤

步骤1： 从CDN导入AngularJS压缩的JS库。

步骤2： 将需要AngularJS功能的代码包装在ng-controller div属性中。

步骤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>

解码URL

解码是指将基于转义的序列URL替换为基于普通特殊字符的URL的过程。为了实现这一点，AngularJS提供了decodeURIComponent()函数，它接受一个编码的URL作为输入，并返回相应的解码序列。

语法

Var decodedURL = decodeURIComponent("")

在这个片段中，decodeURIComponent将“<encoded−URL>”转换为带有特殊字符的普通URL。

步骤

第一步： 从CDN导入AngularJS压缩JS库。

第二步： 使用ng−controller div属性包装需要使用angularJS功能的代码。

第三步： 将整个应用程序包装在ng−app下。

第四步： 使用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>