在Angularjs中使用節點模塊

Question

我正嘗試使用第三方模塊作爲我的角度應用程序中的節點模塊。我剛開始使用angular，但我還沒有完全理解模塊化行爲。 我正在通過腳本標記導入角模塊（路由器等），並將它們注入到我的主應用程序模塊中，但我不知道如何注入節點模塊。

Google讓我更加困惑於CommonJS，AMD等詞語，因爲我剛開始學習模塊化方法。 有人可以指導我如何在我的應用程序模塊中注入節點模塊？

我正在使用AngularJS v1.6.4。我可以選擇使用browserify和webpack。我有他們兩個。

Answer 1

在您使用npm安裝模塊之後，您必須將其包含在腳本標記中。像這樣

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

（I使用角度的消息作爲一個例子）

這通常index.html中與所有其他腳本標記完成的，一起。路線必須是正確的，當然。它將從服務器的角度來看，開發者工具會告訴你它是否找不到該文件。您必須檢查模塊文件夾和/或讀取模塊的自述文件以查找要使用的文件。您想要的大多數模塊的實際代碼是一個.js文件。

您還可以縮短路徑。如果您使用的表達會這樣

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

來完成，因爲快遞設置路由角的消息到node_modules script標籤將變爲

​​

/角度消息。

要使模塊在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可以訪問的對象稱爲驗證，其中包含一個名爲是字母功能。我可以通過$ window訪問它，因爲窗口對象包含從validator.min.js中讀取的代碼。這可能不是使用非AngularJS模塊的最純粹的方式，但它可行。許多非AngularJS模塊也將AngularJS包裝器作爲單獨的模塊。在嘗試使用主版本之前，您可以嘗試找到AngularJS版本。

在使用browserify和webpack之前，我會用它來工作。