Manually Bootstrapping an Angular JS Application

Filed Under: AngularJS

Earlier we looked at various angular form features and its validation. In this post, We will discuss about angular initialization process and how to manually bootstrap an angular application if needed.

Automatically Bootstrapping an Angular Application

Let us have a look at the auto-bootstrap process in angular application that we have used so far. The following code shows the structure of the code, which we have written so far.

  • The script tag is placed at the bottom of the page to improve application load time. By placing script at the end, we can ensure that HTML loading is not blocked by angular.js script loading.
  • The ng-app directive can be placed anywhere in the application. That’s going to be the entry point of the application or angular will automatically bootstrap the application when it sees the ng-app directive.

<!doctype html>
<html lang="en" ng-app="appName">
	<head>
        	<meta charset="UTF-8">
        	<title>AngularJS Application</title>
	</head>
    	<body>

		<!-- other code goes here -->

    		<script type="text/javascript" src="angular.js"></script>
	</body>
</html>

Initialization Process

The following processes takes place in every angular application:

  1. Angular initializes automatically when DOM content is completely loaded or when the angular.js script is evaluated.
  2. Angular looks for the ng-app directive, if found then it loads the module associated with the ng-app directive.
  3. Then an application injector is created.
  4. This will retrieve object instances, instantiate types, invoke methods, and load modules.
  5. Compile the DOM elements treating the element containing ng-app directive as the root of the application.

Manually Bootstrapping an Angular Application

The automatic initialization will not work with asynchronously loaded data that need to perform an operation before Angular compiles a page. The angular will not wait until the loading of data if we rely on auto-initialization process. Therefore, in this scenario you need to have a better control over the initialization process.

Angular provides a method to control the bootstrap process programmatically or we say manually using angular.boostrap() method.

You should not use the ng-app directive if you use angular.bootstrap method.

Using angular.bootstrap() Example

The following example demonstrates how to use angular.bootstrap method to bootstrap an angular application.

We will first create a module and define a controller for our application.

app.js


var app = angular.module('myApp', []);

	app.controller('MessageCtrl', function($scope) {
		$scope.message = 'Angular Bootstrap - Successful';
	});

The following script is used to bootstrap the application. We will pass our module name as the second parameter to the angular.bootstrap method. the first parameter is the document itself. When it is ready, we will bootstrap our application using this method.

bootstrapApp.js


angular.element(document).ready(function() {
	angular.bootstrap(document, ['myApp']);
});

Now we can include these two files in the HTML page and run our application.

index.html


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
        	<title>AngularJS Bootstrap</title>
	</head>
	<body>
		<div ng-controller="MessageCtrl">

   			<p>{{ message }}!</p>

		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
		<script src="app.js"></script>
		<script src="bootstrapApp.js"></script>
	</body>
</html>

You will see the following output on your browser.
bootstrap
That’s all about initialization process and we will see more features in the coming posts.

Comments

  1. Rajpack says:

    Please change title from “Manually Bootstrapping an Angular Application” to ” Manually Bootstrapping an Angular JS Application’..
    It is misleading when you say ‘angular’ and refer to version 1.x

  2. Isaac Jefferson says:

    Thanks for the explanation.

    As said, “The automatic initialization will not work with asynchronously loaded data that need to perform an operation before Angular compiles a page.”
    In the given example for manual bootstrapping, what is asynchronously loaded data?

    As i think that the given example for manual bootstrapping will also work for automatic bootstrapping.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages