延遲加載AngularJS模塊與RequireJS

感謝偉大的article from Dan Wahlin，我設法實現了Angular的控制器和服務的延遲加載。但是，似乎沒有一種乾淨的方式來延遲加載獨立模塊。延遲加載AngularJS模塊與RequireJS

爲了更好地解釋我的問題，假設我有一個應用程序將是結構如下圖無RequireJS：

// Create independent module 'dataServices' module with 'Pictures' object 
angular.module("dataServices", []).factory("Pictures", function (...) {...}); 

// Create 'webapp' ng-app, with dependency to 'dataServices', defining controllers 
angular.module("webapp", ['dataServices']) 
.controller("View1Controller", function (...) {...}) 
.controller("View2Controller", function (...) {...});

這裏是Plunker與RequireJS示例應用程序：
http://plnkr.co/aiarzVpMJchYPjFRrkwn

核心的問題在於Angular不允許在實例化後添加對依賴項的依賴。因此，我的解決方案是使用angular.injector來檢索要在我的View2Controller中使用的Picture對象的實例。請參閱js/scripts/controllers/ctrl2.js文件。

這給了我兩個問題：

注入的服務運行的角度之外，因此所有異步調用必須以$範圍END $適用（）
凌亂的代碼，其中的一些對象可以被注入。使用標準的角度語法，而其他需要明確使用注射器。

有沒有人想出瞭如何使用RequireJS來延遲加載獨立模塊，並且以某種方式將該模塊掛接到角度中，因此可以使用正常的角度依賴注入語法？

注意：
的議題是獨立的模塊的延遲加載。這個特定示例的一個簡單解決方案是在ng-app.config期間使用緩存$提供程序創建「圖片」對象，但這不是我正在尋找的。我正在尋找適用於第三方模塊的解決方案，如angular-resource。

來源

2013-10-02 marcoseu

我發現了這一點[解決方案] [1] $ routeProvider的jQuery和決心 [1]：http://stackoverflow.com/a/28199498/4504198 –

@marcoseu：OFFTOPIC：請嘗試看看這個與angularAMD相關的問題。：http://stackoverflow.com/questions/31288001/how-to-use-chart-js-with-angular-chart-using-requirejs – VBMali

看看我的項目在GitHub上：angular-require-lazy

該項目的目的是展示一個想法和激發討論。但是確實是你想要什麼（檢查expenses-view.js，它加載ng-grid lazily）。

我的意見很感興趣，思想等

（編輯）NG-格角模塊延遲加載如下：

expenses-view.js被延遲加載，當/expenses路由被激活
expenses-view.js指定ng-grid作爲依賴項，所以RequireJs首先加載ng-grid
ng-g RID是調用angular.module(...)

爲了做到這一點的人，我更換（實際上是代理）真正angular.module方法我自己，支持懶惰。請參閱bootstrap.js和route-config.js（功能initLazyModules()和callRunBlocks()）。

此實現有它的缺點，你應該知道的：

配置的功能沒有實現（還）。我不知道是否有可能懶洋洋地提供配置時間依賴關係。
訂單在定義中很重要。如果服務A依賴於B，但A在模塊B之後定義，則DI將失敗。這是因爲lazyAngular代理立即執行定義，與真正的Angular不同，它確保在執行定義之前解決依賴關係。

來源

2013-10-02 09:51:11

有趣的實現，但它並沒有真正回答我的問題，懶惰加載「角。模塊「，除非我錯過了一些東西。您的所有費用-view.js依賴關係都使用「angular.module」進行編碼。但我會記住我想要做的事情。 – marcoseu

也許編輯解釋的東西好一點。 –

我將你的代碼複製到bootstrap.js中，更具體地說，與'makeLazyModule'和'lazyAngular.module'有關的所有東西都是真的。現在，如果我只理解它爲什麼工作... – marcoseu

我完成我自己的實現稱爲angularAMD，這裏是使用它的示例站點：

http://marcoslin.github.io/angularAMD/

它處理的配置功能和亂序模塊定義。

希望這可以幫助其他尋找的東西，以幫助他們RequireJS和AngularJS整合。

來源

2013-10-09 21:36:02 marcoseu

嗨，我想實現angularAMD。使用它必須遵循你的文件夾結構嗎？我想包括服務和指令，如果他們在不同的文件夾？我可以那樣做嗎？ – VishwaKumar

@VishwaKumar不，你根本不需要關注我的文件夾結構。它們都與'main.js'中的'baseUrl'相關。 – marcoseu

@marcoseu：請看看這個問題（尚未解決）：https：//github.com/marcoslin/angularAMD/issues/148 – VBMali

它看起來像Node.js模塊ocLazyLoad定義了一種做這種惰性加載的方式，但我不知道它與其他答案中的方法相比在性能上如何，或者硬編碼依賴。任何有關此信息將不勝感激。一個有趣的事情是，其他答案需要RequireJS來操作，而ocLazyLoad不需要。

它看起來像ocLazyLoad定義了另一個提供商注入依賴的模塊包含已經被實例化後。它似乎是通過基本上覆制一些低級別的Angular行爲來實現的，例如模塊加載和提供，因此它看起來如此複雜。它看起來像它增加了幾乎所有核心角模塊作爲依賴：$compileProvider，$q，$injector，ng，等等等等。

來源

2014-09-28 03:41:29 trysis

延遲加載AngularJS模塊與RequireJS

回答

相關問題