在 Angularjs 中使用节点模块

Posted 2023-03-07

【中文标题】在 Angularjs 中使用节点模块

【英文标题】：Using node modules in Angularjs

【发布时间】：2018-04-01 10:10:42

【问题描述】：

我正在尝试使用第三方模块，该模块可用作我的 Angular 应用程序中的节点模块。我刚刚开始使用 Angular，我还没有完全理解模块化行为。 我正在通过脚本标签导入角度模块（路由器等）并将它们注入到我的主应用程序模块中，但我不知道如何注入节点模块。

Google 让我对 CommonJS、AMD 等词更加困惑，因为我刚刚开始学习模块化方法。 有人可以指导我如何在我的应用模块中注入节点模块吗？

我正在使用 AngularJS v1.6.4。我可以选择使用 browserify 和 webpack。两个我都有。

【问题讨论】：

您首先需要澄清您的问题，说明您使用的是 AngularJS (1.x) 还是 Angular（2.x 或更高版本），并告诉我们您如何构建您的应用程序。

@JB Nizet 我添加了那个细节

【参考方案1】：

使用 npm 安装模块后，您必须将其包含在 script 标签中。像这样

<script src="node_modules/angular-messages/angular-messages.min.js"></script>

（我以 angular-messages 为例）

这通常与所有其他脚本标记一起在 index.html 中完成。当然，路径必须是正确的。它将从服务器的角度来看，开发者工具会告诉您它是否找不到该文件。您必须检查模块文件夹和/或阅读模块的自述文件以查找要使用的文件。大多数模块所需的实际代码是单个 .js 文件。

您还可以缩短路径。如果你使用 express，它会像这样完成

app.use('/angular-messages', express.static(path.join(__dirname, 'node_modules/angular-messages')));

脚本标签会变成

<script src="angular-messages/angular-messages.min.js"></script>

因为 express 设置为将 angular-messages 路由到 node_modules/angular-messages。

要让模块在 AngularJS 中工作，您必须将其作为依赖项添加到应用程序中。例如：

angular.module('myapp', ['ngRoute', 'ngMessages']).config(config).run(setupAuth)

模块的自述文件会告诉您模块的名称。在这种情况下，它被命名为ngMessages，因此它被添加为依赖项。这通常在您引导 AngularJS 应用程序（app.js 或类似文件）的文件中完成。您可以阅读有关模块功能如何工作的信息here。第二个参数通常是一个包含依赖名称的数组。

需要注意的是，只有 AngularJS 模块被添加到这个数组中。如果你有一个不是 AngularJS 模块的模块，例如 validator.js，你必须找到其他方法来使用它。当脚本包含在脚本标签中时

<script src="node_modules/validator/validator.min.js"></script>

它的代码将在全局 window 对象中可用。要在 AngularJS 中访问 window，您可以使用 $window 服务。例如：

let isItAlpha = $window.validator.isAlpha('test123'));

文件validator.min.js 允许访问一个名为validator 的对象，该对象包含一个名为isAlpha 的函数。我可以通过 $window 访问它，因为 window 对象包含从 validator.min.js 读取的代码。这可能不是使用非 AngularJS 模块的最纯粹的方式，但它确实有效。许多非 AngularJS 模块也将 AngularJS 包装器作为单独的模块。在尝试使用主版本之前，您可以尝试查找 AngularJS 版本。

在使用 browserify 和 webpack 之前，我会让它以这种方式工作。

【讨论】：

您的答案是否仅针对构建为 AngularJS 模块的 Node 模块，还是针对任何 Node 模块？

@ThomasDavidKehoe，它不必是 AngularJS 特定的模块。例如，我在答案中使用的 validator.js 脚本看起来像 this（未缩小），并且不是 AngularJS 模块。特定于 Node 的代码通常不起作用，因为浏览器不支持某些语法（require 等）。 validator.js 库在这两个地方都可以使用，因为它是以通用方式编写的。

感谢您的解决方案。不是你说的最纯粹的方式。但在一些遗留项目上，它可以解决问题。

validator 正在工作，因为该库有一个带有纯 javascript 代码的 validator.js 文件，但如果该库完全基于 TypeScript 会怎样。在这种情况下，你将如何将它导入到 AngularJs 控制器中？