Hi guys, this article will helps you to understand a bit more about Angular JS bootstrapping. Here is the explanation for two ways of bootstrapping the Angular application with short examples.
- Automatic Bootstrapping
- Manual Bootstrapping
What are the Initialization Steps for Every AngularJS Application?
- Angular initializes automatically when DOM content is completely loaded or when the jsscript is evaluated.
- Angular looks for the ng-appdirective, if found then it loads the module associated with the ng-app
- Then an application injector is created.
- This will retrieve object instances, instantiate types, invoke methods, and load modules.
- Compile the DOM elements treating the element containing ng-app directive as the root of the application.
What is Automatic Bootstrapping?
- Theng-app is the directive that can be placed anywhere in the application. And that’s going to be the entry point of the application.
- Angular will automatically bootstrap the application when it sees the ng-app
- When you addng-app directive to the root of your application, typically on the <html> tag or <body> tag if you want angular to auto-bootstrap your application.
|
1 |
<html lang="en" ng-app="appName"> |
- The script tag is placed at the bottom of the page to improve application load time. By placing script at the end, we can ensure that HTML loading is not blocked by jsscript loading.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!Doctype html> <html lang="en" ng-app="appName"> <head> <meta charset="UTF-8"> <title>AngularJS Application</title> </head> <body> <!-- other code goes here --> <script type="text/javascript" src="angular.js"></script> </body> </html> |
What is Manual Bootstrapping?
- Angular provides a method to control the bootstrap process programmatically or we say manually using boostrap()method.
- You should not use theng-app directive if you use bootstrap method.
- Manual Bootstrap will provide more control over when and where angular to be initialized. So that the programmer can avoid deadlock situations b/w various script references when using Automatic Bootstrapping.
- Below script will allow user to bootstrap manually.
|
1 2 3 4 5 6 7 |
<script> angular.element(document).ready(function () { angular.bootstrap(document, ['myApp']); }); </script> |
- The first parameter document in angular.bootstrap( ) will make sure that your document is ready before bootsrapping.
- Second parameter is the name of the Module.
Here is the example for Manual Bootstrapping
Make sure that your application consist of AngularJS reference
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> |
Below is script which will be placed in <body> .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="myApp">Failed to Load Document</div> <script type="text/template" id="myTemplate"> <div ng-controller="myController"> FirstName :<input type="text" ng-model="txtFirstName" /><br /> LastName :<input type="text" ng-model="txtLastName" /><br /> <p>{{txtFirstName}} {{txtLastName}}</p> <button ng-click="reset()">Reset</button> </div> </script> |
Below is script for manual bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> var app = angular.module('myApp', []); app.controller("myController", function ($scope) { $scope.txtFirstName = ''; $scope.reset = function () { $scope.txtFirstName = ''; $scope.txtLastName = ''; }; }); angular.element(document).ready(function () { var template = document.getElementById("myTemplate"); var appDiv = document.getElementById("myApp"); appDiv.innerHTML = template.innerHTML; angular.bootstrap(angular.element(appDiv), ['myApp']); }); </script> |
Output: Here is the output for manually bootstraped angular application
File 
