30

What is the behaviour of calling angular.module('myModule') multiple times?

For example, I wish to define my routes and my directives in separate .js files.

Is this safe?

eg:

//routes.js
angular.module('app',['$strap'])
   .config(function($routeProvider, $locationProvider) {
     ...
   });

//directives.js
angular.module('app')
    .directive('formInput', function() {
...

Also, what is the impact of defining the dependencies multiple times? Is this additive, or last-in-wins?

eg:

3 Answers 3

34

angular.module(name[, requires], configFn);
...
requires(optional) – {Array.=} – If specified then new module is being created. If unspecified then the the module is being retrieved for further configuration. -- angular.module docs

I would interpret that as follows: you can only define the dependencies once -- the first time you call angular.module for a particular module. You can call angular.module() multiple times after that, but the requires option must not be specified.

Sign up to request clarification or add additional context in comments.

2 Comments

Just to explain a bit more, angular.module('app',['$strap']) works as a setter. This will register a module with angular and define its dependencies. angular.module('app') functions as a getter, it will use the previously registered module and allow you to add on to it with controllers and directives, etc.
A little more detail -- if you are calling .config() method on the module, make sure to omit the [requires] array, this way, the config block will be additive to all previous configurations. If kept, the config block will overwrite those configs.
16

You should only create your module once. According to the docs, if you create a module with a name that already exists, it will overwrite the previous one. (So last-in-wins.)

angular.module('app', []);

You can retrieve your module as many times as you like and in separate files if you wish. You will typically retrieve your module multiple times to declare services, controllers, directives, etc.

angular.module('app').service('myService', ...);
angular.module('app').controller('myController', ...);
angular.module('app').directive('myDirective', ...);

In the AngularJS docs on Modules, see the section called Creation versus Retrieval.

Comments

6

I'm new to angular, but this is my understanding: you create one module in each file with a namespaced module name, and in your main module you require those modules.

// in main app.js file
var app = angular.module('myapp', 
          ['myapp.routers', 'myapp.directives', 'myapp.filters']);

// in filters.js
angular.module('myapp.filters', []).filter(....)

// in routers.js
angular.module('myapp.routers', []).router(....)

// in directives.js
angular.module('myapp.directives', []).directive(....)

3 Comments

A module does not have to be contained within a single file, even though the seed project does it this way. I have a project set up where I declare all modules within the app.js-file, and then declare one controller/directive/service per file beyond that, and that works fine.
I would avoid this type of architecture as it almost becomes usless to modularize your application. The intended goal of modularizing I believe would be to isolate your components in your app to only instantiate it when needed. I know its off topic but I just wanted share my thought on this. Maintaining modules and dependcy injection becomes quickly a mess so be careful when creating multiple modules.
@MarkOdey that depends entirely on what the modules are. You're absolutely correct for what one would guess is the architecture implied by this answer. For specific business logic factories (or possibly services) which could be included in different combinations in different places, this could be the best way to modularize.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.