#TECH

Process to Use Manual Bootstrapping in AngularJs with Examples

The purpose of this blog is to describe how we can manually bootstrap Angular application and what is the benefit of manual initialization.

Angular Application can be automatically initialized by just using ng-app directive on element, all we need to do is to include AngularJS JavaScript file.

Whenever ng-app directive is found it is designated as a root of the application and code written within ng-app block will be treated as a part of angular application.

For Example-

HTML CODE
AutoBootstrap Html
 
JS CODE
AutoBootstrap Jspng
 
The Output of above code will be-
AutoBootstrap output

Now the question arises- if we can automatically bootstrap or initialize Angular application using ng-app directive then why manual initialization?

Manual initialization is useful when you want to perform certain actions before angular application bootstrap and compile a page.

Suppose you have to load some data or have to bind some template using server side request, but what if angular application gets initialized automatically before that operation is completed?

Is there any solution for the same? If yes, then what is the solution?

Can’t we manually initialize our application depending upon the success and failure of result? Yes we can do that. So the solution to theĀ above problem is Manually Initializing angular application.

So let’s first take a look how we can manually initialize our application.

Example

HTML CODE
ManualBootstrap Html
 
JS CODE
ManualBootstrap Js

The Output of above code will be
ManualBootstrap output

Now Let’s take a look how manually initializing our application can be helpful when we want to perform some actions before angular application bootstrap
Manual Bootstrap Adv
 
In the above example, as you can see we are calling bootstrapMyApp function after our server side request is completed and when we are done with all operations we want to perform on response we are receiving. Angular Application will bootstrap when bootstrapMyApp function is called so this ensures that when our operation is completed then only angular compilation works.

So if there is any scenario where we want to do some task before angular bootstrap and compilation process then we can use Manual Initialization Approach.

I hope you find this useful. Drop in your comments if you like to share your views on the same.