how angularjs reference module load dependency

Question

I have a main module, that loads ngRoute service.

angular.module("app", ["ngRoute", "app.settings"]

and my app.settings module is not loading ngRoute service,

angular.module("app.settings", [])
    .config(["$routeProvider", function($routeProvider){
        $routeProvider.when("/settings", { 
            template: "{{message}}", 
            controller:"SettingsController"
        });
}])

But I can use $routeProvider in this module.

Does angular module loading order not care? Can I load any dependency any module?

Answer 1

The thing is that your app module is loading the ngRoute, and also is loading your app.settings modules, so the dependency is already injected into your Angular application, so there is no need to injected again.

Does angular module loading order not care? The order doesn't matter Angular first resolve the dependencies and then compiles the modules, controllers etc.

angular.module("app", ["ngRoute", "app.settings"]

Is the same as

angular.module("app", ["app.settings", "ngRoute"]

However you can run into troubles in some Unit Test scenarios if you only load the module app.settings your test will fail. But in the most cases you are going to load the app module and all the main modules of your Angular application.

Can I load any dependency any module? Short answer, yes.

Long answer: Your ngRoute dependency should be loaded in the main module because is something which your app module is going to need it to define the basic routing, if the dependency is loaded in several modules is not going to throw any error, in fact you should add all the dependencies needed by each module because in large applications there is no guarantee that the ngRoute/myFactory/etc is already loaded.

Update to improve readability