在 Angularjs 中使用节点模块

Question

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

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

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

Answer 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 之前，我会让它以这种方式工作。