Bootstrapping AngularJS

Rumman Ansari Software Engineer 2023-01-27 146 Share

☰ Table of Contents

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>

‹ Previous - Benefits of AngularJS

Next › - Assignment 1: Hello <first name> <last name> with AngularJS

Bootstrapping AngularJS