AngularJS Bootstrapping Application

In this tutorial,we will number of ways to bootstrap the angular application. Angular applications can be initialized in two ways:

Automatic initialization

    • Angular applications mostly uses ngApp directive  to bootstrap an application automatically
    • Download latest angular from angularjs.org 
    • add angular.js in the html either in head or bottom of page to
      •  <script src="../angular.min.js"></script>
    •  place ngApp directive  to root element  of the application either to body or html
      • <body ng-app="bootEg" ng-controller="BootstrapController">
    •  Make sure that you have added only one ng-app element since  AngularJS applications supports  auto-bootstrapping for only one ng-app directive per HTML document.
    • If you want more ng-app and you need to  manually bootstrap them as explained in below using angular.bootstrap() function
    • Below is the sample code:
      • bootMessage variable is bind to “BootstrapController”  and  display the message
      • <html>
        <head>
         <title>Auto Bootstrap Example</title>
        </head>
        <body ng-app="bootEg" ng-controller="BootstrapController">
          {{bootMessage}}
        </body>
         <script src="../angular.min.js"></script>
         <script>
           var app = angular.module('bootEg',[]);
            app.controller('BootstrapController',['$scope',function( $scope){
           $scope.bootMessage = "Hi!!!... Auto bootstrapping of angular application";
          }]);
         </script>
        </html>

Manual Initialization

  • angular.bootstrap  function is used to manually start up angular application. suppose if you require to use two modules in single HTML page then use angular.bootstrap() . In the below example, we have two SPA applications: Simple Calculator and EMI Calculator.
  • If you want to create theme as two applications then follow the below code:
    • Define  two div elements.  you should not o not nest under the div element  to use them as differant applications.
      •  <div ng-controller="CalcController">
         {{calTitle}}
         </div>
         <!-- In this DIV we will defince EmiCalculator application -->
         <div ng-controller="EmiController">
         {{emiTitle}}
         <div>
    • create two module instances
      • 1. var calApp = angular.module('calc',[]); 
        2. var emiApp = angular.module('emi',[]);
    • invoke angular.bootstrap with two modules
      • angular.bootstrap(document,['calc','emi'],'{strictDi:true}');
    • CalTitle variable is bound to CalcController which created from  calc app
    • emiTitle variable is bound to EmiController  which created from emi app
    • Sample Code:
    • <html>
      <head>
       <title>Manual Bootstrap Example</title>
      </head>
      <body >
       <!-- Here we will create Calcular Application-->
       <div ng-controller="CalcController">
       {{calTitle}}
       </div>
       <!-- In this DIV we will defince EmiCalculator application -->
       <div ng-controller="EmiController">
       {{emiTitle}}
       <div>
       
      </body>
       <script src="../angular.min.js"></script>
       <script>
      
           var calApp = angular.module('calc',[]);
                 calApp.controller('CalcController',['$scope',function( $scope){
                 $scope.calTitle = "Calculator Application";
              }]);
           var emiApp = angular.module('emi',[]);
               emiApp.controller('EmiController',['$scope',function( $scope){
               $scope.emiTitle = "EMI Application";
            }]);
           angular.bootstrap(document,['calc','emi'],'{strictDi:true}');
       </script>
      
      </html>

Leave a Comment

Your email address will not be published. Required fields are marked *