Multiple Module in Angularjs

Question

Is it possible to create multiple module in an Angular Script? I went through the documentation and learned that it is some kind of main method concept.

I need examples to demonstrate this.

Answer 1

Yes, you can define multiple modules in angularJS as given below.

var myApp = angular.module('myApp', [])
var myApp2 = angular.module('myApp2', [])

However, don't forget to define the dependency during each module declarations as below. Let's assume myApp2 dependent on myApp. Hence, the declaration would be something similar to,

var myApp = angular.module('myApp', [])
var myApp2 = angular.module('myApp2', ['myApp'])

The modularization in AngularJS helps us to keep the code clarity and easy to understand, as we can combine multiple modules to generate the application. However, we need to keep in mind that, we should modularize the components based on their functionality not by their types.

Answer 2

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp See also

https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ http://docs.angularjs.org/api/angular.bootstrap

you can also use only one ng-app but combine 2 modules like this way:

var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
  $scope.name = "Bob A";
});

var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
  $scope.name = "Steve B";
});

angular.module("CombineModule", ["MyModuleA", "MyModuleB"]);

and then ng-app="CombineModule"

Answer 3

Of course you can. Just use angular.module('moduleName', [/* dependencies */]) as many times as the # of your modules you wish to create.

To get a reference to a previously defined module just do: var myModule = angular.module('moduleName'); and then myModule.controller(...), myModule.config(), myModule.constant() etc.

A suggested project layout (see Angular Seed) has a module for your app, then another for your controllers, another for your services, another for your filters and yet another for your directives. Of course this is a mere suggestion. Others suggest alternative layouts.

Answer 4

I think that he has confused module with ngApp, in that there is only one application (ng-app) on a page and that the app's view (ngView or <ng-view>) can only exist once as well. But as stated in previous answers you can create as many modules as you like and inject them as dependencies into your "main" application module. I usually do this to separate my directives, filters, controllers and such in their own modules.

Edit:

ngApp - http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngApp

Answer 5

what do you mean multiple module? you can inject module into another module

angular.module(name[ anotherModule]);