Please enable Javascript to correctly display the contents on Dot Net Tricks!
 
Become an Expert in C#, .NET, MVC, JAVA, PHP, AngularJS, Hadoop, Android, iphone, Testing etc.
by Joining our Training Programs and Take Your Career to the Next Level! To know more make a call on +91-9871-74-9695
Get Started!

Bootstrapping angular app based on multiple modules

Posted By : Shailendra Chauhan, 26 Dec 2014
Total Views : 4,868   
 
  Keywords : multiple modules to bootstrap your angular app, initialized angular app based on multiple modules

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.

 
Further Reading
 
About the Author
Hey! I'm Shailendra Chauhan full-time author, consultant & trainer. I have more than 6 years of hand over Microsoft .NET technologies and other web technologies like JavaScript, AngularJS, NodeJS etc. I am an entrepreneur, the founder & chief editor of www.dotnet-tricks.com and www.dotnettricks.com. I am author of most popular e-books for technical Interview on ASP.NET MVC Interview Questions and Answers & AngularJS Interview Questions and Answers & LINQ Interview Questions and Answers.
I have delivered 100+ training sessions to professional world-wide over Microsoft .NET technologies such C#, ASP.NET MVC, WCF, Entity Framework and other mobile technologies such Ionic, PhoneGap, Corodva. Read more...
 
Free Interview Books
 
SUBSCRIBE & FOLLOW US
 
Protected by Copyscape Web Plagiarism Check
Browse By Category
7 6 2 1 26 15 1 5 29 6 5 4 18 10 1 2 2 6 4 6 5 15 5 56 1 1 2 6 1 48 3 1 5 10 7 2 2 6 4
 
 
Like us on Facebook
 
 
GET IN TOUCH
  B-64, Near SBI Bank, Sector-2 Noida (India)
  Metro, Noida Sector-15 (Walking Distance)
  +91-987-174-9695, +91-120-25-401-33
DOT NET TRICKS
DISCLAIMER!
www.dotnet-tricks.com is a well-known knowledge and support resource in the field of .NET technologies worldwide. Here, I share my working experience, training experience, research and knowledge. The opinions expressed here are my own and not belongs to any other organization.
Creative Commons LicenseCopyright © 2015. The content is copyright to DOT NET TRICKS and may not be reproduced on other websites without written permission from DOT NET TRICKS.