如何在AngularJS/Angular中导入Node.js文件的函数变量并传递IOTA数据到前端

你当前的核心问题是原始client.js为Node.js环境代码，使用的CommonJS规范require语法无法直接在浏览器中运行，以下提供两种可直接落地的实现方案：

方案一：Node.js作为后端提供接口（推荐） #

将IOTA数据查询逻辑封装为后端接口，前端通过HTTP请求获取数据，可彻底规避前端依赖适配问题。

步骤1：改造Node.js后端 #

先安装所需依赖：

npm install express cors

修改后的client.js代码：

const Iota = require('@iota/core');
const Extract = require('@iota/extract-json');
const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;

// 允许前端跨域调用
app.use(cors());

const iota = Iota.composeAPI({
  provider: 'https://nodes.devnet.iota.org:443'
});

// 定义消息查询接口
app.get('/api/messages', async (req, res) => {
  try {
    const bundle = await iota.getBundlesFromAddresses(['PXMPEGYZCOVEOSRAUXY9VYRBHJBSDWORWQNBDJRVEFTMXZWLTQZSPHEUDMXT9YKGPMMSVDSNHSJNWQUOX']);
    const x = [];
    for (let i = 0; i < bundle.length; i++) {
      x[i] = JSON.parse(Extract.extractJson(bundle[i])).message;
    }
    res.json(x);
  } catch (err) {
    console.error(err);
    res.status(500).json({error: '数据查询失败'});
  }
});

app.listen(port, () => {
  console.log(`后端服务运行端口：${port}`);
});

步骤2：编写AngularJS控制器逻辑 #

myApp.js代码如下：

var app = angular.module('myApp', []);
app.controller('client', function($scope, $http) {
  // 调用后端接口获取数据
  $http.get('http://localhost:3000/api/messages')
  .then(function(response) {
    $scope.x = response.data;
  })
  .catch(function(err) {
    console.error(err);
  });
});

步骤3：调整HTML代码 #

删除HTML中引入client.js的语句，该代码为后端运行代码无需前端加载：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="client">
    {{ x[0]}}
    {{ x[1]}}
    {{ x[2]}}
</div>

<script src="myApp.js"></script>
</body>
</html> 

运行方式 #

• 先启动后端服务：node client.js
• 直接打开HTML文件即可看到渲染数据

方案二：浏览器端直接运行IOTA查询逻辑 #

如果不想搭建后端服务，可直接使用IOTA官方适配浏览器环境的版本，无需Node.js运行环境。

步骤1：调整HTML引入依赖 #

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- 引入浏览器适配版IOTA库 -->
<script src="https://unpkg.com/@iota/core@1.0.0-beta.30/dist/iota-core.min.js"></script>
<script src="https://unpkg.com/@iota/extract-json@1.0.0-beta.30/dist/extract-json.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="client">
    {{ x[0]}}
    {{ x[1]}}
    {{ x[2]}}
</div>

<script src="myApp.js"></script>
</body>
</html> 

步骤2：修改控制器逻辑 #

将查询逻辑直接写入myApp.js：

var app = angular.module('myApp', []);
app.controller('client', function($scope) {
  // 从全局对象获取IOTA工具
  const Iota = window.IotaCore;
  const Extract = window.IotaExtractJson;
  const iota = Iota.composeAPI({
    provider: 'https://nodes.devnet.iota.org:443'
  });
  $scope.x = [];

  iota.getBundlesFromAddresses(['PXMPEGYZCOVEOSRAUXY9VYRBHJBSDWORWQNBDJRVEFTMXZWLTQZSPHEUDMXT9YKGPMMSVDSNHSJNWQUOX'])
  .then(bundle => {
    for (let i = 0; i < bundle.length; i++) {
      $scope.x[i] = JSON.parse(Extract.extractJson(bundle[i])).message;
    }
    // 通知AngularJS数据更新，触发视图重渲染
    $scope.$apply();
  })
  .catch(err => {
    console.error(err);
  });
});

注意事项 #

该方案仅适用于公开数据查询场景，禁止在前端代码中写入任何私钥、种子等敏感信息，避免数据泄露。

内容的提问来源于stack exchange，提问作者SERKAN AKBULUT