bootstrap

export bootstrap(appComponentType: Type, customProviders?: Array<any /*Type | Provider | any[]*/>) : Promise<ComponentRef>

exported from angular2/platform/browser defined in angular2/platform/browser.ts (line 35)

Bootstrapping for Angular applications.

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

Simple Example

Assuming this index.html:

<html>  <body> <my-app>loading...</my-app> </body> </html>

An application is bootstrapped inside an existing browser DOM, typically index.html. Unlike Angular 1, Angular 2 does not compile/process providers in index.html. This is mainly for security reasons, as well as architectural changes in Angular 2. This means that index.html can safely be processed using server-side technologies such as providers. Bindings can thus use double-curly {{ syntax }} without collision from Angular 2 component double-curly {{ syntax }}.

We can use this script code:

@Component({selector: 'my-app', template: 'Hello {{ name }}!'}) class MyApp { name: string = 'World'; } function main() { return bootstrap(MyApp); }

When the app developer invokes bootstrap() with the root component MyApp as its argument, Angular performs the following tasks:

It uses the component's selector property to locate the DOM element which needs to be upgraded into the angular component.
It creates a new child injector (from the platform injector). Optionally, you can also override the injector configuration for an app by invoking bootstrap with the componentInjectableBindings argument.
It creates a new Zone and connects it to the angular application's change detection domain instance.
It creates an emulated or shadow DOM on the selected component's host element and loads the template into it.
It instantiates the specified component.
Finally, Angular performs change detection to apply the initial data providers for the application.

Bootstrapping Multiple Applications

When working within a browser window, there are many singleton resources: cookies, title, location, and others. Angular services that represent these resources must likewise be shared across all Angular applications that occupy the same browser window. For this reason, Angular creates exactly one global platform object which stores all shared services, and each angular application injector has the platform injector as its parent.

Each application has its own private injector as well. When there are multiple applications on a page, Angular treats each application injector's services as private to that application.

API

appComponentType: The root component which should act as the application. This is a reference to a Type which is annotated with @Component(...).
customProviders: An additional set of providers that can be added to the app injector to override default injection behavior.

Returns a Promise of ComponentRef.