Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding AngularJS Bootstrap Process

  Author : Shailendra Chauhan
Posted On : 26 Dec 2014
Total Views : 11,893   
Updated On : 26 Sep 2016
 

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:

  1. Load the module associated with the directive.

  2. Create the application injector.

  3. Compile the DOM starting from the ng-app root element.

This process is called auto-bootstrapping.

<html>
<body ng-app="myApp">
 <div ng-controller="Ctrl">
 Hello {{msg}}!
 </div>

 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('myApp', []);
 app.controller('Ctrl', function ($scope) {
 $scope.msg = 'World';
 });
 </script>
</body>
</html>

Manual Bootstrap Process

You can manually initialized your angular app by using angular.bootstrap() function. This function takes the modules as parameters and should be called within angular.element(document).ready() function. The angular.element(document).ready() function is fired when the DOM is ready for manipulation.

<html>
<body>
 <div ng-controller="Ctrl">
 Hello {{msg}}!
 </div>
 <script src="lib/angular.js"></script>

 <script>
 var app = angular.module('myApp', []);
 app.controller('Ctrl', function ($scope) {
 $scope.msg = 'World';
 });

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

Note

  1. You should not use the ng-app directive when manually bootstrapping your app.

  2. You should not mix up the automatic and manual way of bootstrapping your app.

  3. Define modules, controller, services etc. before manually bootstrapping your app as defined in above example.

What do you think?

I hope you will enjoy the AngularJS bootstrap process while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (0)
6 JUL
ASP.NET Core with Angular4 Development (Online)

7:00 AM-9:00AM IST(+5:30 GMT)T/T

Know More
5 JUL
NodeJS with Angular4 Development (Online)

08:00 PM-09:30 PM IST(+5.30 GMT)M/W/F

Know More
1 JUL
ASP.NET MVC with Angular4 Development (Online)

03:30 PM-05:30 PM IST(+5.30 GMT) Weekend

Know More
1 JUL
ASP.NET MVC with Angular4 Development (Classroom)

8:00 AM-10:00 AM Weekend

Know More
1 JUL
ASP.NET Core with Angular4 Development (Classroom)

3:00PM 5:00PM Weekend

Know More
1 JUL
Xamarin Forms : Build Cross-platform Apps (Classroom)

3:00 PM 5:00 PM Weekend

Know More
1 JUL
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM Weekend

Know More
30 JUN
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5.30 GMT) MON/WED/FRI

Know More
29 JUN
Hadoop Development cum Administration (Online)

7:00 AM-9:00AM IST(+5:30 GMT)T/W/T

Know More
26 JUN
Xamarin Forms : Build Cross-platform Apps (Online)

9:30PM- 11:00PM IST(+5:30GMT) M/W/F

Know More
26 JUN
Xamarin Forms : Build Cross-platform Apps (Online)

9:30PM- 11:00PM IST(+5:30GMT) M/W/F

6 JUN
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)(TT)

3 JUN
ASP.NET MVC with Angular4 Development (Classroom)

4:00 PM-5:30 PM Weekend

20 MAY
Angular2 and Angular4 Development (Online)

08:00 AM-10:00 AM IST(+5.30 GMT) Weekend

20 MAY
NodeJS with Angular4 Development (Classroom)

5:30 PM-7:00 PM Weekend

8 MAY
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5:30 GMT) M/W/F

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+