CODEWITHSUNDEEP
javascriptangularjsangular
OneHoopyFrood
OneHoopyFrood

Reputation: 3959

What does "bootstrapping" mean in the context of Angular 2?

This question is very similar to my own, but I believe different enough (with version 2) to merit another.

What, specifically, does calling bootstrap() do in an Angular 2 app? Can you explain in simple terms (like I'm 5)?

Lil Background

Angular 2 Quickstart contains the following main.js

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

What I get:

I understand this code pretty well. I grok the scoping and event listening and all that, and I understand that bootstrapping is performed through one of a variety of libraries depending on the environment the app is running in, which is cool.

What I don't:

What is NOT explained is what, exactly, bootstrapping (line 3) is doing for/to my app. I've heard of it in other contexts as the first thing to run on an embedded system to gather all needed resources, and I understand how to use it in Angular 1 apps, but I've never had to call a bootstrap function like this.

Is it just attaching the backend to the DOM in a webapp? If so, what would it be doing in other contexts?

Upvotes: 8

Views: 1303

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657228

bootstrap()

bootstrap() initializes Angulars zone, Angular itself, the dependency injector (DI) and the router if used.
Then it creates the root component and adds it to the DOM. By creating the root component, it also has to create all its children and descendants.

Zone

Angulars zone patches almost all async APIs like addEventListener(), setTimeout(), ... to get notified when such an event happend or better when the event handlers called for these events are completed. This is the time when Angular runs its change detection to checks if the model has changed and changes need to be propagated and the view needs to be updated.

no special backend

Angular doesn't do anything special with the backend. If there are resources that need to be loaded then requests are made to fetch these, but there is no special backend except a normal HTTP web server.

WebWorker

If you use WebWorker then there are basically two Angular applications that are bootstrapped. Most of the code and change detection runs then in the WebWorker and another application runs in the UI-thread that updates the DOM. These two applications communication using message passing.

Upvotes: 5

Related Questions