angular.bootstrap Explained in 3 Examples

Follow us on LinkedIn for our latest data and tips!

By default, an Angular application is initialized automatically by loading the angular.js script and placing the ng-app directive to the root element of your application (e.g. <html> tag), like the following:

<!doctype html>
<html ng-app>
<body>
  ...
  <script src="angular.js"></script>
</body>
</html>

Alternatively, you can also initialize your application manually if you need, using the angular.bootstrap() function. This is especially useful when you want your application to initialize only after a certain period or bound to another event taking place. See this page for further details about the initialization methods in Angular.

How to Use angular.bootstrap

angular.bootstrap is a function component in the core ng module that is used for starting up the Angular application manually, which gives you more control over how you initialize your application. The syntax for angular.bootstrap is as follows:

angular.bootstrap(element, [modules], [config]);

element is a DOM element (e.g. document) that is the root of the Angular application, modules (optional) is an array of modules to be loaded and config (optional) is an object used for configuration options. You can check this page on the official developer guide to read more about angular.bootstrap syntax.

Example 1: Manually Bootstrap Your Angular Application

In the following example, we manually bootstrap our application which displays a welcome message once the user logs in.

<!doctype html>
<html>
<body>
  <div ng-controller="LoginMessage">{{message}}</div>
  <script src="angular.js"></script>
  <script>
  angular.module('example', [])
  .controller('LoginMessage', function($scope) {
    $scope.message = 'Welcome to Members Area!';
  });
  angular.bootstrap(document, ['example']);
  </script>
</body>
</html>

Note how we selected document as the root of the application and how we passed the example module to the angular.bootstrap() function.

Example 2: Bootstrap by Selecting a Specific Element

In the following example, we will display the current year in our application and bootstrap it by selecting a specific element as the application root.

<!doctype html>
<html>
<body>
  <div id="year" ng-controller="Year">{{CurrentYear}}</div>
  <script src="angular.js"></script>
  <script>
  angular.module('example', [])
  .controller('Year', function($scope) {
    $scope.CurrentYear = new Date().getFullYear();
  });
  angular.bootstrap(document.getElementById('year'), ['example']);
  </script>
</body>
</html>

We selected the div element with the id #year as the root of our application.

Example 3: Bootstrap Multiple Applications

Using the angular.bootstrap function, you can bootstrap multiple angular applications on a single page. Let’s say we have two applications (app1 and app2) defined by two div elements:

<div id="app1">...</div>
<div id="app2">...</div>

We use the following code to start up these two applications:

angular.module('app1', []);
angular.module('app2', []);

angular.bootstrap(document.getElementById('app1'), ['app1']);
angular.bootstrap(document.getElementById('app2'), ['app2']);

Before ending this tutorial, we will list a number of things you should pay attention while manually starting your applications using angular.bootstrap.

  • If you use angular.bootstrap to start your application, you shouldn’t use the ng-app directive.
  • You need to create the custom modules before passing them as a parameter to angular.bootstrap().
  • When using multiple bootstraps on the same page, use them cautiously.
/