AngularJS实现的base64编码与解码功能示例

AngularJS是一个流行的JavaScript框架，支持对前端数据进行处理和操作。Base64编码是一种将二进制数据转换成ASCII字符串的编码方式，它经常在各种场景中使用，比如网络传输、图片上传和加密等等。在AngularJS中实现Base64编码与解码功能非常简单，下面我将为大家详细介绍如何实现。

一、安装AngularJS

首先我们需要在项目中引入AngularJS。可以通过npm或者cdn引入，比如：

<!--cdn引入-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>

<!--npm引入-->
npm install angular

引入成功之后就可以开始实现Base64编码与解码功能了。

二、实现Base64编码

实现Base64编码需要AngularJS提供的angularBase64模块，我们首先需要引入该模块。可以在项目中直接引入angular-base64.js或者通过npm安装并引入，比如：

<!--直接引入-->
<script src="angular-base64.js"></script>

<!--npm安装并引入-->
npm install angular-base64 --save
<script src="node_modules/angular-base64/angular-base64.min.js"></script>

引入成功之后，我们就可以在AngularJS代码中使用$base64服务实现Base64编码了。下面是一段示例代码：

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

app.controller('myCtrl', function($scope, $base64) {
  $scope.strToBase64 = function(input) {
    $scope.base64Str = $base64.encode(input);
  };
});

在上面的代码中，我们将base64模块注入了我们的应用，并实现了一个名为strToBase64的方法。该方法接受一个input参数，将其使用$base64.encode()方法进行Base64编码，并将结果赋值给base64Str变量。下面是一个HTML实现的示例：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="inputStr"/>
  <button ng-click="strToBase64(inputStr)">Base64 Encode</button>
  <p>Base64 String: {{base64Str}}</p>
</div>

现在我们可以在浏览器中打开该HTML页面，输入文本内容并点击“Base64 Encode”按钮，就会将其进行Base64编码并显示出来。

三、实现Base64解码

实现Base64解码也需要我们引入angularBase64模块，由于模块已经在第二步添加过了，这里就不再赘述。下面是一段示例代码：

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

app.controller('myCtrl', function($scope, $base64) {
  $scope.base64ToStr = function(input) {
    $scope.str = $base64.decode(input);
  };
});

在上面的代码中，我们实现了一个名为base64ToStr的方法。该方法接受一个input参数，将其使用$base64.decode()方法进行Base64解码，并将结果赋值给str变量。下面是一个HTML实现的示例：

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="inputStr"/>
  <button ng-click="base64ToStr(inputStr)">Base64 Decode</button>
  <p>Original String: {{str}}</p>
</div>

现在我们可以在浏览器中打开该HTML页面，输入Base64编码后的文本内容并点击“Base64 Decode”按钮，就会将其进行Base64解码并显示出原始文本。