
.l-main-section
  h2(class="function export") bootstrap

  
  pre.prettyprint
    code.
      bootstrap(appComponentType: Type, componentInjectableBindings?: List&lt;Type | Binding | List&lt;any&gt;&gt;, errorReporter?: Function) : Promise&lt;ApplicationRef&gt;
  

  p.location-badge.
    exported from <a href='../core'>angular2/core</a>
    defined in <a href="https://github.com/angular/angular/tree/3a0410a/modules/angular2/src/core/application.ts#L156-L317">angular2/src/core/application.ts (line 156)</a>

  :markdown
    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
    <html>
      <!-- load Angular script tags here. -->
      <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 bindings 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
    bindings. 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'
    })
    @View({
       template: 'Hello {{ name }}!'
    })
    class MyApp {
      name:string;
    
      constructor() {
        this.name = 'World';
      }
    }
    
    main() {
      return bootstrap(MyApp);
    }
    ```
    
    When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument,
    Angular performs the
    following tasks:
    
     1. It uses the component's `selector` property to locate the DOM element which needs to be
    upgraded into
        the angular component.
     2. It creates a new child injector (from the platform injector) and configures the injector with
    the component's
        `appInjector`. Optionally, you can also override the injector configuration for an app by
    invoking
        `bootstrap` with the `componentInjectableBindings` argument.
     3. It creates a new `Zone` and connects it to the angular application's change detection domain
    instance.
     4. It creates a shadow DOM on the selected component's host element and loads the template into
    it.
     5. It instantiates the specified component.
     6. Finally, Angular performs change detection to apply the initial data bindings for the
    application.
    
    
    ## Instantiating Multiple Applications on a Single Page
    
    There are two ways to do this.
    
    
    ### Isolated Applications
    
    Angular creates a new application each time that the `bootstrap()` method is invoked. When
    multiple applications
    are created for a page, Angular treats each application as independent within an isolated change
    detection and
    `Zone` domain. If you need to share data between applications, use the strategy described in the
    next
    section, "Applications That Share Change Detection."
    
    
    ### Applications That Share Change Detection
    
    If you need to bootstrap multiple applications that share common data, the applications must
    share a common
    change detection and zone. To do that, create a meta-component that lists the application
    components in its template.
    By only invoking the `bootstrap()` method once, with the meta-component as its argument, you
    ensure that only a
    single change detection zone is created and therefore data can be shared across the applications.
    
    
    ## Platform Injector
    
    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
    injector 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(...)`.
    - `componentInjectableBindings`: An additional set of bindings that can be added to `appInjector`
    for the
    <a href='../annotations/Component-var.html'><code>Component</code></a> to override default injection behavior.
    - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for
    unhandled exceptions.
    
    Returns a `Promise` with the application`s private <a href='../di/Injector-class.html'><code>Injector</code></a>.
    


