在 Angularjs 中使用节点模块

Question

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

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

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

Answer 1

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

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

（我以 angular-messages 为例）

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

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

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 或类似的东西）的文件中完成。您可以在此处阅读有关模块功能如何工作的信息。第二个参数通常是一个包含依赖名称的数组。

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

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

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

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

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

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