2016-06-20 188 views
2

我一直在遇到關於AngularJS應用程序模塊聲明訂單的不一致行爲。在我目前的機器上,下面兩個模塊聲明的順序工作,而在我的同事的機器上,只有第二個順序編譯沒有依賴性錯誤。AngularJS模塊聲明訂單

一階[呼吸首先]

這裏模塊在呼吸第一方式聲明,又名父模塊被聲明,然後將依賴隨後以下聲明。這種聲明模塊的方式讓人想起解釋器加載Python模塊的方式,或者Java類如何加載它們的導入。

(function() { 
    angular.module('app.services', [ 
     'app.services.data', 
     'app.services.nav', 
     'app.services.session' 
    ]); 
})(); 

(function(){ 
    angular.module("app.services.data", []); 
})(); 

二階[深度首頁]

這裏模塊深度優先的方式宣佈,將是在依賴關係樹早在該文件中,使這些子依賴更深層次的依賴當它們被加載爲更高級別模塊的依賴關係時已經聲明。這種方式是JavaScript變量排序聲明的典型特徵。變量A在聲明之前不能使用B.

(function(){ 
    angular.module("app.services.data", []); 
})(); 

(function() { 
    angular.module('app.services', [ 
     'app.services.data', 
     'app.services.nav', 
     'app.services.session' 
    ]); 
})(); 

所以現在我的問題是:爲什麼這種行爲不同於機器到機器?我目前使用的機器是Ubuntu 14.04 64位處理器,Intel Core i5-3230M處理器,我的瀏覽器是Chrome 51.03,而我的同事機器是Windows 10機器,Intel Core i5-4570k和Chrome 51.03作爲他的瀏覽器。我們都使用相同的源代碼,相同的編譯腳本(gulp)和相同的依賴關係(angular^1.5.0)。

獎勵積分,如果你也有一個想法如何我可以確保適當的依賴順序在我的大文件中,而無需手動排序他們一個接一個。

+0

你在說什麼樣的「依賴性錯誤」?角模塊的特點是它們不應該遵循任何特定的定義順序。但是該模塊應該在與angular.module('...')'一起使用之前進行定義。 – estus

+0

我的同事說:「我首先想到問題是我們在聲明它之前在另一個模塊依賴關係中包含了一個模塊,但經過進一步的研究似乎是不相關的;問題似乎是模塊正在在聲明之前引用(在函數中使用)引發錯誤,因此該模塊永遠不會被註冊,從而導致依賴注入器失敗,因爲該模塊從未找到。「 –

+1

JS模塊可以自動保持正確的文件加載順序。如果'編譯腳本'只是Gulp concat,它就成爲一個挑戰,並且需要明確指定文件順序。如果文件按字母順序加載,這將不起作用。我會建議堅持正確的工具(Webpack/Browserify)。 – estus

回答

2

JS模塊可以自動保持正確的文件加載順序。如果'編譯腳本'只是Gulp concat,它就成爲一個挑戰,並且需要明確指定文件順序。

如果文件按字母順序裝入,則不起作用。我會建議堅持正確的工具(Webpack/Browserify)。 JS模塊不能替代Angular模塊,而是讚美它們。

如果應用程序非常模塊化(每個文件/單元一個模塊)並且angular.module('...')被禁止使用,即使對於連接構建,問題也不再存在。這種方法對於OOP設計和'每個文件一類'約定是非常有益的。