Please enable Javascript to correctly display the contents on Dot Net Tricks!

Bootstrapping angular app based on multiple modules

  Author : Shailendra Chauhan
Posted On : 26 Dec 2014
Total Views : 9,453   
 

AngularJS is automatically initialized for one module. But sometimes, it is required to bootstrap for multiple modules and it can be achieved by using two methods:

  1. Automatic bootstrap (by combining multiple modules into one module)

    You can combine multiple modules into single modules and your angular app will be automatically initialized for newly created module and other modules will act as dependent modules for newly created module.

    For example, suppose you have two modules: module1 and model2, and you have to initialize your app automatically based on these two modules then you achieve this following way:

    <html>
    <head>
     <title>Multiple modules bootstrap</title>
     <script src="lib/angular.js"></script>
     <script>
     //module1
     var app1 = angular.module("module1", []);
     app1.controller("Controller1", function ($scope) {
     $scope.name = "Shailendra Chauhan";
     });
    
     //module2
     var app2 = angular.module("module2", []);
     app2.controller("Controller2", function ($scope) {
     $scope.name = "Deepak Chauhan";
     });
    
     //module3 dependent on module1 & module2
     angular.module("app", ["module1", "module2"]);
     </script>
    </head>
    <body>
     <!--angularjs autobootstap process-->
     <div ng-app="app">
     <h1>Multiple modules bootstrap</h1>
     <div ng-controller="Controller2">
     {{name}}
     </div>
     <div ng-controller="Controller1">
     {{name}}
     </div>
     </div>
    </body>
    </html>
    
    
  2. Manual bootstrap

    You can manually bootstrap your app by using angular.bootstrap() function, for multiple modules.

    The above example can be rewritten as for manual bootstrap process as given below:

    <html>
    <head>
     <title>Multiple modules bootstrap</title>
     <script src="lib/angular.js"></script>
     <script>
     //module1
     var app1 = angular.module("module1", []);
     app1.controller("Controller1", function ($scope) {
     $scope.name = "Shailendra Chauhan";
     });
    
     //module2
     var app2 = angular.module("module2", []);
     app2.controller("Controller2", function ($scope) {
     $scope.name = "Deepak Chauhan";
     });
    
     //manual bootstrap process
     angular.element(document).ready(function () {
     var div1 = document.getElementById('div1');
     var div2 = document.getElementById('div2');
    
     //bootstrap div1 for module1 and module2
     angular.bootstrap(div1, ['module1', 'module2']);
    
     //bootstrap div2 only for module1
     angular.bootstrap(div2, ['module1']);
     });
     </script>
    </head>
    <body>
     <!--angularjs autobootstap process-->
     <div id="div1">
     <h1>Multiple modules bootstrap</h1>
     <div ng-controller="Controller1">
     {{name}}
     </div>
     <div ng-controller="Controller2">
     {{name}}
     </div>
     </div>
    
     <div id="div2">
     <div ng-controller="Controller1">
     {{name}}
     </div>
     </div>
    </body>
    </html>
    
    What do you think?

    I hope you have got, how to bootstrap your angular app based on multiple modules. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (0)
2 JUN
Hadoop Development cum Administration (Online)

7:00 AM-9:00AM IST

Know More
28 MAY
ASP.NET Core with Angular4 Development (Classroom)

10:30 AM-11:30 AM Weekend

Know More
27 MAY
ASP.NET MVC with Angular4 Development (Classroom)

4:00 PM-5:30 PM Weekend

Know More
25 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

Know More
25 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

20 MAY
Angular2 and Angular4 Development (Online)

08:00 AM-10:00 AM IST(+5.30 GMT) Weekend

20 MAY
NodeJS with Angular4 Development (Classroom)

5:00 PM-6:30 PM Weekend

8 MAY
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5:30 GMT) M/W/F

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

22 APR
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM Weekend

10 APR
Master Class ASP.NET MVC 5 with Angular2 Plus Angular4 Development (Online)

09:00 PM - 11:00 PM IST (M/W/F)

25 MAR
Xamarin Forms : Build Cross-platform Apps (Classroom)

8:00 AM-9:30AM Weekend

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+