What the bootstrap function does in Angular 2

Question

I am very new to front-end frameworks and I am learning Angular 2. The tutorial talks about including the bootstrap(AppComponent) line bootstrap(AppComponent) . What does this bootstrap function do? Is this just what launches the application? I assume this has nothing to do with twitter-bootstrap UI.

Answer 1

From documents :

You create an instance of the Angular application by explicitly specifying the component that will be used as the root component for your application using the bootstrap () method.

So yes, it just launches the application.

Answer 2

bootstrap() initializes the Angular application by executing (among others)

• Angular zone creation
• creating a root injector and
• execution of plants provided by APP_INITIALIZER
• creating an instance and adding a root component.

Answer 3

bootstrap is a function that tells the Angular2 system Angular2 display a component across the page as the main component.

Also defines the entity point of your application by specifying the root of your application.

 //basically array will have dependencies of shared component which will instantiate only once. bootstrap(MyComponent, [SharedService, OtherComponent, ROUTING_DIRECTIVES]); 

But yes, you should mention that the component selector on the index.html page, for example

 <my-component></my-component> 

If you compare this to Angular 1, you will find the ng-app directive that takes the name angular.module as input, such as ng-app="myApp" , and makes this module component available for this application OR angular.bootstrap to run the application through the page.

Answer 4

Basically bootstrap() in angular2 tell us about the entry point for an application with a very symmetry in ng-app in angular 1.x, it creates an angular zone for the whole application, In angular 1. x we ​​could use the ng-app directive and give its value, for example ng-app="myApp" , or use the angular.bootstrap method, which allows asynchronous loading.

The place required to load the bootstrap method is angular2 / platform / browser

  import {bootstrap} from 'angular2/platform/browser'; ... Some Code stuff bootstrap(AppComponent, [Common providers, or Global services, varibale etc]); 

We can also introduce GlobalServices, the variables that we are going to use throughout the application during the loading of our application, by doing this we do not want to import them again and again in our components.

Answer 5

And now in Angular5:

• Boot array

Launch the bootstrapping root AppModule . Among other things, the boot process creates the components listed in the bootstrap array and inserts them into the browser DOM.

Further reading:

• Bootstrap in main.ts