Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple Module in Angularjs

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.

like image 690
Habibur Rahman Avatar asked Aug 29 '13 13:08

Habibur Rahman


People also ask

Can we have multiple modules in AngularJS?

Yes, you can define multiple modules in angularJS as given below. 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.

Can we have two app module in Angular?

So now, you need to follow some simple steps to use multiple modules in an Angular application. Create a simple application using Angular CLI. If you are going to use Angular for the first time, click here. I am going to create an application which contains three modules: App, Employee, Admin, Home.

Can we have multiple controllers in AngularJS?

An AngularJS application can contain one or more controllers as needed, in real application a good approach is to create a new controller for every significant view within the application. This approach will make your code cleaner and easy to maintain and upgrade. Angular creates one $scope object for each controller.

What is module in AngularJS?

An AngularJS module defines an application. The module is a container for the different parts of an application. The module is a container for the application controllers. Controllers always belong to a module.


5 Answers

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.

like image 199
Aviro Avatar answered Sep 28 '22 17:09

Aviro


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"

like image 41
Mohamed NAOUALI Avatar answered Sep 28 '22 16:09

Mohamed NAOUALI


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

like image 22
m.e.conroy Avatar answered Sep 28 '22 17:09

m.e.conroy


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.

like image 26
Thalis K. Avatar answered Sep 28 '22 18:09

Thalis K.


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

angular.module(name[ anotherModule]);
like image 35
LauroSkr Avatar answered Sep 28 '22 16:09

LauroSkr