angularjs - 在 Angularjs 中使用节点模块

Question

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

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

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

Answer 1

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

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

(我使用 Angular 消息作为示例)

这通常在index.html 中与所有其他脚本标记一起完成。当然路径必须正确。它将从服务器的 Angular 来看，开发人员工具会告诉您是否找不到该文件。您必须检查模块文件夹和/或阅读模块的自述文件才能找到要使用的文件。大多数模块所需的实际代码是单个 .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 消息路由到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>

其代码将在全局窗口对象中可用。要访问 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 等之前，我会让它以这种方式工作。