8

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?

1 Answer 1

5

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.

1
  • All DOM events that can happen, (click, change, scroll, ...). I have an appointment. I'll check later. Commented May 5, 2016 at 16:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.