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

  
  pre.prettyprint
    code.
      bootstrap(appComponentType: /*Type*/ any, appBindings?: Array&lt;Type | Binding | any[]&gt;) : Promise&lt;ComponentRef&gt;
  

  p.location-badge.
    exported from <a href='../core'>angular2/core</a>
    defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.37/modules/angular2/src/core/application_common.ts#L110-L233">angular2/src/core/application_common.ts (line 110)</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). 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 multipl
    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 the
      app injector to override default injection behavior.
    - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter
      for unhandled exceptions.
    
    Returns a `Promise` of <a href='ComponentRef-interface.html'><code>ComponentRef</code></a>.
    
    


