top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to bootstrap your angular app for multiple modules?

0 votes
701 views
How to bootstrap your angular app for multiple modules?
posted Oct 9, 2017 by Jayshree

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

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 auto bootstrap 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 manual bootstrap 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>
answer Oct 9, 2017 by Shivaranjini
...