What does bootstrap function do in Angular

Question

I'm very new to frontend frameworks and I am learning Angular 2. In the tutorial, it tells you to include the line bootstrap(AppComponent). What does this bootstrap function do? Is it simply what starts the app? I'm guessing it has nothing to do with the twitter-bootstrap UI framework.

Answer 1

From the docs:

You instantiate an Angular application by explicitly specifying a component to use as the root component for your application via the bootstrap() method.

So yes, it just starts the application.

Answer 2

bootstrap() initializes an Angular application by executing (beside others)

• creating the Angular zone,
• creating the root injector and
• executing factories provided by APP_INITIALIZER
• instantiating and adding the root component.

Answer 3

bootstrap is the function which tells Angular2 system to render component over page as main component.

Also defines entity point of your application, by specifying 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 have mention that component selector over index.html page like

<my-component></my-component>

If you compare this with Angular 1, you will find ng-app directive which takes angular.module name as an input like ng-app="myApp" and make available those module component for that application OR angular.bootstrap function to kick off application over the page.

Answer 4

Basically bootstrap() in angular2 tell us the Entry point for the app very similer to ng-app in angular 1.x, it creates angular zone for the whole app,In Angular 1.x we could use the ng-app Directive, and give it a value such as ng-app="myApp", or use the angular.bootstrap method which allows for asynchronous bootstrapping.

The place we need to fetch 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]);

also we can inject GlobalServices, variables which we are going to use in the whole app at the time of bootstraping our app, by doing so we dont nees to imports those again and again in our components.