Automatic (vs) Manual Bootstrapping in Angular JS

Hi guys, this article will helps you to understand a bit more about Angular JS bootstrapping. Here is the explanation for two ways of bootstrapping the Angular application with short examples.

  1. Automatic Bootstrapping
  2. Manual Bootstrapping

 

What are the Initialization Steps for Every AngularJS Application?

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

What is Automatic Bootstrapping?

  • Theng-app is the directive that can be placed anywhere in the application. And that’s going to be the entry point of the application.
  • Angular will automatically bootstrap the application when it sees the ng-app
  • When you addng-app directive to the root of your application, typically on the <html> tag or <body> tag if you want angular to auto-bootstrap your application.

  • 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 jsscript loading.

What is Manual Bootstrapping?

  • Angular provides a method to control the bootstrap process programmatically or we say manually using boostrap()method.
  • You should not use theng-app directive if you use bootstrap  method.
  • Manual Bootstrap will provide more control over when and where angular to be initialized. So that the programmer can avoid deadlock situations b/w various script references when using Automatic Bootstrapping.
  • Below script will allow user to bootstrap manually.

  • The first parameter document in angular.bootstrap( ) will make sure that your document is ready before bootsrapping.
  • Second parameter is the name of the Module.

Here is the example for Manual Bootstrapping

Make sure that your application consist of AngularJS reference

Below is script which will be placed in <body> .

Below is script for manual bootstrap

 

Output: Here is the output for manually bootstraped angular application