Sharing Modules in AngularJs

Question

We currently have a setup for our angularjs apps, where there's a file called "app.js" which holds

var app = angular.module('VolumeOutputOptions', [
    'someDirectiveModule',
    'someServiceModule'
]);

Apart from code shared between apps like someDirectiveModule, almost every class depends on this global variable. This has occasionally led to issues where a new dependency is added, but it turns out that "app" is used in contexts where that dependency hasn't been included. Also, global variables, bleugh.

Is there a better way to share a single module between all the directives and controllers of your app? For example, would

angular.module('VolumeOutputOptions').directive(...);

angular.module('VolumeOutputOptions').controller(...);

be two separate modules with the same name, or would angular detect and merge them?

Answer 1

If you use like

angular.module('VolumeOutputOptions').directive(...);

angular.module('VolumeOutputOptions').controller(...);

to use like this there must be a something like angular.module('VolumeOutputOptions', []) to create the module before it use. then both of them are assign to same module VolumeOutputOptions .

if you define a module like angular.module('moduleName', []) with the second array parameter for dependency then only angular create a new module. If there is no array parameter passed then angular will refer to the previous module which declared with same name.