Bootstrapping AngularJS: A Step-by-Step Guide

Rumman Ansari   Software Engineer   2024-07-28 05:07:43   166  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

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>