AngularJS Bootstrap Application

AnguarJS is simply a neat and advanced JavaScript framework defined by MVC i.e. Model, View and Controller. It allows to extend HTML with its directives, expressions and methods of two way binding. In the following tutorial, we look at the different ways by which we can bootstrap an application. Bootstrapping is simpley the initialization of the AngularJS application.

There are two methods of bootstrapping. One is the automatic method and the other one is manual method.

Automatic Bootstrapping-

If we add ng-app directive in the root of the application on the html or body tag, then we are auto bootstrapping our application.

<html ng-app="myApp">
							

If AngularJS encounters ng-app, it loads the corresponding module and compiles the DOM.

Manual Bootstrapping-

We can also use script to bootstrap our application. This is the manual method of bootstrapping. This provides us with more control on the initialization of the application. Given below is the script by which we can manually bootstrap AngularJS.

<script>
    angular.element(document).ready(function() {
 	      angular.bootstrap(document, ['myApp']);
 	   });
</script>

Since it uses document.ready, it makes sure that the DOM is ready before bootstrapping is done. There are some things that we must keep in mind while working with AngualrJS-

angular.bootstrap function will not create modules in real time. The modules have to be well defines before manual bootstrapping is done. The following example code shows how to implement manual bootstrapping

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

Controllers, services, directives cannot be added after an application bootstraps.



Next ConceptLogin Application