Post
Ask Question

AngularJS BootStrap Process

Bootstraping an angular application is as simple as making coffee for yourself.

There are two ways to bootStrap Angular Application.

  • Automatic BootStrap (Coffee by Machine)
  • Manual BootStrap (Handmade coffee, you can face some trouble)

Automatic BootStrap:

When DOM content is loaded , Angular looks for the ngApp directive which designates application root.
If it finds ngApp directive

a. It loads the module associated with this directive.

e.g.

  1. <html ng-app='myApp'>  
  2.   
  3. <head>  
  4.     <script src='angular.js'>  
  5.     </script>  
  6.     <script>  
  7.         var app = angular.module('myApp', []);  
  8.         app.controller('myController', function($scope) {  
  9.             $scope.message = 'Dear';  
  10.         });  
  11.     </script>  
  12. </head>  
  13.   
  14. <body>  
  15.     <div ng-controller="myController">  
  16.         <p> Hi {{ message}} </p>  
  17.     </div>  
From the above script, It will load "myApp".

b. Then, it creates the application injector.

c. Lastly, It compiles the DOM where ngApp directive as the root of the compilation.

This whole process says that Only a portion of the DOM is being treated as an Angular application.

As both Automatic and Manual process of bootStraping of an Angular application are different one. Remember to not mix these two concepts together.

These are two ways to do the same processing.

Now let's move to the Manual process of bootstraping an Angular application.

Manual Bootstrap:

There is a big difference in Automatic and manual Bootstrap.

 

  1. You do not need to attach ng-app directive with the html element.

  2. You call function angular.bootstrap(document,['myApp']).
    1. <!doctype html>  
    2. <html>  
    3.   
    4. <body>  
    5.     <div ng-controller="myController"> Best movie: {{MovieName}}! </div>  
    6.     <script src='angular.js'>  
    7.     </script>  
    8.     <script>  
    9.         angular.module('myApp', []).controller('MyController', ['$scope', function($scope)  
    10.         {  
    11.             $scope.MovieName = 'The IRON MAN';  
    12.         }]);  
    13.         angular.element(document).ready(function()   
    14.         {  
    15.             angular.bootstrap(document, ['myApp']);  
    16.         });  
    17.     </script>  
    18. </body>  
    19.   
    20. </html>  
    Angular.bootstrap can not create module for you untill you do not make a custom module to give it as a parameter inside.

    Before bootstraping the process you need to add controllers, directives and services etc.

    Manual bootstrap comes into picture when you need more control over the initialization process. like if you want to perform an operation before

    Angular compiles a page.

NOTE: You should not use ng-app directive in case of manual bootstrap of an angular application.
Next Recommended Reading AngularJS Compilation Process