A working solution:
main.ts:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
app.component.ts:
import {Component} from 'angular2/core';
import {HomeComponent} from './home.component';
import {AboutComponent} from './about.component';
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
@Component({
selector: 'my-app',
providers:[ROUTER_PROVIDERS],
template: `
<nav>
<a [routerLink]="['Home']">Home</a>
<a [routerLink]="['About']">About</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '',
name: 'Home',
component: HomeComponent,
useAsDefault: true},
{path: '/about',
name: 'About',
component: AboutComponent},
{ path: '/**', redirectTo: ['Home'] }
])
export class AppComponent {
}
home.component.ts:
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Router} from 'angular2/router';
@Component({
selector: 'home',
template: `
<h1>Home</h1>
`
})
export class HomeComponent{
}
about.component.ts:
import {Component, OnInit} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Router} from 'angular2/router';
@Component({
selector: 'about',
template: `
<h1>About</h1>
`
})
export class AboutComponent{
}
<br>tags definitely shouldn't be there :D