Bootstrapping Multiple Modules In AngularJS

In this article we will be Understanding AngularJS Bootstrap Process talking about automatic Bootstrapping and manual Bootstrapping multiple modules in AngularJS.

Angular initiates automatically upon [marker color=”#dbdbdb” textcolor=”#1e73be”]DOMContentLoaded[/marker] event or when the angular.js script is downloaded to the browser and the [marker color=”#dbdbdb” textcolor=”#1e73be”]document.readyState[/marker] is set to [marker color=”#dbdbdb” textcolor=”#1e73be”]complete[/marker].

At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:

Load the module associated with the directive.
Create the application injector.
Compile the DOM starting from the ng-app root element.

This process is called auto-bootstrapping.

module

Example

<html>
<body ng-app="myApp">
    <div ng-controller="Ctrl">
        Hello {{msg}}!
    </div>
    <script src="lib/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('Ctrl', function ($scope) {
            $scope.msg = 'World';
        });
    </script>
</body>
</html>

You can manually initialized your angular app by using angular.bootstrap() function. This function takes the modules as parameters and should be called within angular.element(document).ready() function. The angular.element(document).ready() function is fired when the DOM is ready for manipulation.

Example

<html>
<body>
    <div ng-controller="Ctrl">
        Hello {{msg}}!
    </div>
    <script src="lib/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('Ctrl', function ($scope) {
            $scope.msg = 'World';
        });
        //manual bootstrap process
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['myApp']);
        });
    </script>
</body>
</html>

Note

1. You should not use the ng-app directive when manually bootstrapping your app. 
2. You should not mix up the automatic and manual way of bootstrapping your app. 
3. Define modules, controller, services etc. before manually bootstrapping your app as defined
   in above example.

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:

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 = "Arif Khoja";
        });
        //module2
        var app2 = angular.module("module2", []);
        app2.controller("Controller2", function ($scope) {
            $scope.name = "Yatendra Joddha";
        });
        //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>

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 = "Arif Khoja";
        });
        //module2
        var app2 = angular.module("module2", []);
        app2.controller("Controller2", function ($scope) {
            $scope.name = "Yatendra Joddha";
        });
        //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>

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.

Arif Khoja

Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.