Table of Contents

    Bootstrapping AngularJS: A Step-by-Step Guide

    Rumman Ansari July 28, 2024 505 views

    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

    When ng-app directive is added to the root of your application i.e., on the <html> tag or <body> tag, angular is auto-bootstrapped to the application.

    <html ng-app="myApp">

    When AngularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.

    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>