Use Different Angular Modules At The Same Time In An HTML page

AngularJS provides the facility to organize all the JavaScript code into modules. The advantage of that is to avoid declaring objects and variables in the global namespace.

Angular.module function is used to define a module in AngularJS. Angular is a global namespace which exposed by AngularJS. It is always available for anyone who uses AngularJS. The angular.module function accepts two parameters the name of the module and array of dependencies of other modules.

The angular.module function returns a module instance we can define a controller based on that instance using controller function.

In this article I explain how to use several modules in a single Html page.

Step 1 - Firstly, you need to create an empty html web page with Head and Body section.

Step 2 - In the Head section import the angular -js file inside Script tag - You can download it on this link https//angularjs.org/ - You can use online reference as shown in my example.



Step 3 - Create two JavaScript files. I have named them as App.Js and App2.js.

Step 4 - Inside App.js file define the first module as shown in the example code. Name it as mainModule. Inside the main module you can place your own code. In my example, I have registered an object instance which named Employee and two variables (firstName and lastName) and a function to get employee's full name in it,



Step 5 - In the example, we register an object instance and we name it Employee. The name of a registered instance has to be unique in the module. Next declare the mainController. Then we can have our registered Employee object through Dependency Injection by simply specifying the name Employee as an argument of the controller function.

Step 6 - Create the second module inside the JavaScript file that named App2.js and name the module as subModule.

Step 7 - Inside the subModule you can register an object instance using value function as previously done. Define a controller using controller function. In my example I have registered Calc object instance.



Step 8 - Then you need to import both JavaScript files to the Index.html file that we previously created.

Step 9 - You can use object reference variable (EmployeeInstance and CalcInstance) which we declared in the controller function of the module.

Step 10 - In html body tag you need to add ng.app directive to use AnglarJs in html page. I have added two div tags in my html page to call the controllers separately. Inside the div tag we can place ng.controller directive to call to the related controller.

Step 11 - Give the module name to the ng.app directive and controller names to the ng.controller directive. In my example, I have included mainModule for ng.app directive.



Step 12 - Then go to your browser and open the index page on it. You will see the result shown as follows.


Step 13 - To get the expected result we need to use the following code line inside the Script tag on the head section our Index.html file and use the name CombineModule for ng.app directive,

angular.module("CombineModule", ["mainModule", "subModule"]);





Then save changes and repress the browser to see the expected result,


This is my first article. Your comments are highly appreciated.