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.