I've noticed some inconsistency in the behavior of module declaration order for AngularJS apps. Interestingly, on my machine, both the orders of module declaration work fine. However, on my colleague's machine, only the second ordering compiles without any dependency errors.
First Order [Breath First]
In this approach, modules are declared in a breath-first fashion. The parent modules are declared first, followed by their dependencies. This method is similar to how Python modules are loaded by the interpreter or how Java classes load their imports.
(function() {
angular.module('app.services', [
'app.services.data',
'app.services.nav',
'app.services.session'
]);
})();
(function(){
angular.module("app.services.data", []);
})();
Second Order [Depth First]
This method involves declaring modules in a depth-first manner. Dependencies that are deeper in the tree are placed earlier in the file so that sub-dependencies are already declared when they are needed by higher-level modules. This method is common in JavaScript variable declaration where a variable cannot use another before it's been declared.
(function(){
angular.module("app.services.data", []);
})();
(function() {
angular.module('app.services', [
'app.services.data',
'app.services.nav',
'app.services.session'
]);
})();
Now, the question arises: Why does this behavior differ between machines? My machine runs on Ubuntu 14.04 64-bit with an Intel Core i5-3230M processor and Chrome 51.03 browser, whereas my colleague's machine is a Windows 10 system with an Intel Core i5-4570k processor also running Chrome 51.03. We're using the same source code, compilation script (gulp), and dependencies (angular ^1.5.0).
Additionally, if you have any suggestions on ensuring proper dependency order in my gulpfile without manual sorting, I'd greatly appreciate it!