在Angularjs中使用节点模块

时间:2017-10-20 08:59:41

标签: angularjs webpack browserify node-modules

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

谷歌让我对CommonJS,AMD等词语更加困惑,因为我刚刚开始学习模块化方法。 有人可以指导我如何在我的app模块中注入节点模块吗?

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

1 个答案:

答案 0 :(得分:0)

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

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

(我使用angular-messages作为例子)

这通常在index.html中与所有其他脚本标记一起完成。当然,道路必须是正确的。它将从服务器的角度出发,Developer Tools将告诉您它是否找不到该文件。您必须检查模块文件夹和/或读取模块的自述文件以查找要使用的文件。大多数模块所需的实际代码是单个.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或类似的东西)中完成。您可以阅读有关模块功能如何工作的信息here。第二个参数通常是包含依赖项名称的数组。

应该注意,只有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以及所有这些之前,我会以这种方式工作。