Use Multiple Modules On Same Page In AngularJS

Anubhav Chaudhary

10y91.7k14100Article

AngularJSng ModulesMultiple Modules in AngularJSUse Multiple Modules

14 Comments

Join the conversation! Your thoughts help the community grow.

Subash10y ago
Nice
Pramod Thakur10y ago
thanks for sharing..
Rupali Shinde10y ago
thank for sharing new concept in angularjs
Anubhav Chaudhary10y ago
Thanks Nanddeep Nachan and Anupam Singh
Anupam Singh10y ago
cool..
Nanddeep Nachan10y ago
Nice share
Anubhav Chaudhary10y ago
Thanks Debasis Saha and Shubham Kumar
Shubham Kumar10y ago
nice
Debasis Saha10y ago
Nice article..
Anubhav Chaudhary10y ago
Thanks All
Santhakumar Munuswamy10y ago
Thanks for nice article.
Pradeep Sahoo10y ago
Thanks Anubhav, can this feature applied to two div instead of forms .which versions of angular support this
- Anubhav Chaudhary10y ago
  Yes you can use it with div and I doesn't think you will face any problem with angular 1.2 onwards
Humayun Kabir Mamun10y ago
Nice...

Introduction

In this article I'll explain 'How to Use Multiple Modules on the Same Page.'

While you are working with AngularJS, you might find a situation where you are having some scopes which are available in some controller, but those controllers belong to different modules; in such a case you might have introduced new scope in controller so that you can use it. This is because you can't declare multiple modules in "ng-app", this is a limitation of ng-app, it restricts you to only one module per page. To get rid of this problem you can choose "ng-module" which is available in "angular.ng-modules". angular.ng-modules is a new directive which needs to be provided where you had provided the AngularJS directive, you can download it from my source code.

I am creating a sample application to show how you can use this feature.

Step 1: Firstly, download the "angular.ng-modules" using the above links.

After this provide where you had provided the "angularjs" directive.

<head>
<title></title>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script src="AngularController.js"></script>
</head>

Step 2: Now I am creating a new JavaScript file where we will declare our modules, controller, and scopes.

var firstModule = angular.module('firstModule', []);
firstModule.controller('firstController', function ($scope) {
$scope.UserName = 'Anubhav Chaudhary';
});
firstModule.controller('secondController', function ($scope) {
$scope.MobileNumber = '00000000';
});
var secondModule = angular.module('secondModule', []);
secondModule.controller('thirdController', function ($scope) {
$scope.EmailId = '[email protected]';
});

Here you can see that I declared two modules named "firstModule" and "secondModule," inside the firstModule I created two controllers and in those controllers I created some scope properties, inside secondModule only one controller is created and in the controller one scope property is created. To all these scopes some default value is also provided.

Step 3: Now it's time to work on the main section i.e. HTML section.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script src="AngularController.js"></script>
</head>
<body>
<form ng-modules="firstModule,secondModule">
<fieldset>
<legend>We are having both the modules</legend>
<div ng-controller="firstController">
Provide Your Name :
<input type="text" ng-model="UserName" />
</div>
<div ng-controller="secondController">
Provide Your Mobile Number :
<input type="text" ng-model="MobileNumber" />
</div>
<div ng-controller="thirdController">
Provide Your Email ID :
<input type="text" ng-model="EmailId" />
</div>
</fieldset>
</form>
<form ng-module="secondModule">
<fieldset>
<legend>I am having only second module</legend>
<div ng-controller="thirdController">
Provide Your Email ID :
<input type="text" ng-model="EmailId" />
</div>
</fieldset>
</form>
</body>
</html>

Here you can see that I created two forms, let's firstly talk about the first form.

In the first form you can see that I had provided both the modules using "ng-modules" directive. When you are using "ng-modules" then it allows you to use multiple modules at same time, but if you don't wan't to use multiple modules then you can use "ng-module" directive.

Inside the first form all three controllers are used in three different div's and their scopes are bind to some input fields.

In the second form you can see that I have used "ng-module" because I need to use only one module here. Inside the form div is bound to a corresponding controller and an input element is bound to scope property.

Now our application is created and it's time to see the output.

Output: On running the application you will see an output like this,

All the input fields have their scope value and this means that our code has run successfully and both the modules got bound at same time.