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>
- Define two div elements. you should not o not nest under the div element to use them as differant applications.
