Bootstrapping Angular 2

Question

I've been watching some tutorials on Angular 2. I'm confused on bootstrapping components. If I want to create multiple page applications, and don't need that root component, how would I go about doing that? I see how it would work for single page applications.

This is my Main.Ts File.

import { bootstrap } from 'angular2/platform/browser';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

Here is my app.component.ts file.

import {Component} from 'angular2/core'; 

@Component({
    selector: 'pm-app',
    template: '<h1>{{PageTitle}}</h1>'
})
export class AppComponent {
    PageTitle: string = "Test";  

}

If I wanted to navigate to a page other than let's say index.html, and have it load a different component without bringing in the AppComponent, how would I go about doing that? In Angular 1+, it was easy since I just referenced the controller on the HTML page that I wanted to use. How would I just reference the component I want to use on a different page?

Thanks. Trying to wrap my head around angular 2.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-05-13T20:00:11

Some component always has to be that root component.

There is no need that it is always the same component. You can also bootstrap multiple components at one page, but each Angular2 application starts at some element, and that's the root component that is initialized with

@NgModel({
  ...
  bootstrap: [AppComponent]
})

The view of that element can contain other elements and directives which make up the whole application.

Bootstrapping Angular 2

2 Answers