如何使用 AngularJS 编码解码 URL？

在 AngularJS 应用程序中，使用 $location 服务可以完成 URL 的编码和解码。$location 服务可以帮助我们获取当前页面的 URL，也可以允许我们在不刷新页面的情况下改变 URL 的值。

URL 编码

在使用 AngularJS 的 $location 服务编码 URL 时，我们可以使用 encodeURIComponent() 方法来对需要编码的字符串进行编码操作。具体代码如下所示：

var encodedURL = $location.absUrl() + encodeURIComponent("你需要编码的字符串");

上面的代码中，$location.absUrl() 方法可以获取当前页面的 URL，encodeURIComponent() 方法可以对需要编码的字符串进行编码操作，从而生成一个可以被浏览器解析的 URL。

URL 解码

当我们需要使用 AngularJS 解码 URL 时，我们可以使用 $location 服务的 search() 方法来获取 URL 参数的值，然后使用 decodeURIComponent() 方法对参数进行解码操作。具体代码如下所示：

var decodedParam = decodeURIComponent($location.search().param);

上面的代码中，$location.search().param 可以获取 URL 参数的值，decodeURIComponent() 方法可以对参数进行解码操作，从而得到原始的字符串值。

示例代码

下面是一个通过 AngularJS 编码和解码 URL 的完整示例代码：

var app = angular.module("myApp", []);

app.controller("myCtrl", function($location, $scope) {

   // 编码 URL
   $scope.encodeURL = function() {
      var encodedURL = $location.absUrl() + encodeURIComponent($scope.originalURL);
      $scope.result = encodedURL;
   };

   // 解码 URL
   $scope.decodeURL = function() {
      var decodedURL = decodeURIComponent($location.search().url);
      $scope.result = decodedURL;
   };
});

在上面的代码中，我们定义了一个名为 myApp 的应用程序，以及一个名为 myCtrl 的控制器，用来完成 URL 的编码和解码操作。在控制器中，我们分别编写了 encodeURL() 和 decodeURL() 方法来实现 URL 的编码和解码操作。该示例代码的 HTML 文件中包含了两个文本框和两个按钮，用于输入和显示 URL 的值，并触发相应的 URL 编码和解码操作。

完整的示例代码及演示效果，可以访问 https://codepen.io/pen?template=mQWPQr 进行查看。