Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 819
OneHoopyFrood Avatar asked May 05 '16 16:05

OneHoopyFrood


People also ask

What does bootstrapping mean Angular?

angular. bootstrap is a function component in the core ng module that is used for starting up the Angular application manually, which gives you more control over how you initialize your application.

What does bootstrapping in it mean?

What is bootstrap in a computer? In computing, the term bootstrap means to boot or to load a program into a computer using a much smaller initial program to load in the desired program, which is usually an OS.

What is bootstrap component in Angular?

A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router. Angular loads a root AppComponent dynamically because it's listed by type in @NgModule. bootstrap .

What does it mean to bootstrap a component?

In general, bootstrapping usually refers to a self-starting process that is supposed to proceed without external input.


1 Answers

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.

like image 73
Günter Zöchbauer Avatar answered Oct 12 '22 23:10

Günter Zöchbauer