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)?
Angular 2 Quickstart contains the following main.js
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));
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 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?
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 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.
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 .
In general, bootstrapping usually refers to a self-starting process that is supposed to proceed without external input.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With