Bootstrapping AngularJS: A Step-by-Step Guide

Bootstrapping AngularJS

• Bootstrapping in AngularJS is just the initialization of Angular app.

• The ng-app directive indicates which part of the page (either entire HTML page or portion of it) is the root of the Angular application.

• Angular reads the HTML within that root and compiles it into an internal representation. This reading and compiling is the bootstrapping process.

• There are two ways of bootstrapping AngularJS. One is Automatic Bootstrapping and the other one is Manual Bootstrapping using a Script.

Automatic Bootstrapping

Manual Bootstrapping

In Manual bootstrapping, initialization happens inside the script after your app is created.

In the following example, the application myApp is bootstrapped after creating the same using angular.module(‘myApp’, [ ]).

<script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);
    angular.element(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>