import {Component, provide, bootstrap} from 'angular2/angular2';
import {
  RouteConfig,
  ROUTER_DIRECTIVES,
  ROUTER_PROVIDERS,
  ROUTER_PRIMARY_COMPONENT
} from 'angular2/router';


@Component({
  template:`Route11NODE`
})
export class Route11Node {}

@Component({
  template: 'Route12NODE'
})
export class Route12 {}




@Component({
  template:`Route1NODE`
})
export class Route1Node {}

@Component({
  directives: [ROUTER_DIRECTIVES],
  template: 'Route1 => <router-outlet></router-outlet>'
})
@RouteConfig([
  { path: '/route11', component: Route11Node, as: 'Route11Node' },
  { path: '/route12', component: Route12, as: 'Route12' }
])
export class Route1 {

}




@Component({
  selector: 'app',
  viewProviders: [],
  directives: [ROUTER_DIRECTIVES],
  template: `
  <section class="sample-app-content">
    <nav>
      <a [router-link]="['/Route1Node']">Route1</a><br>
      &nbsp;&nbsp;<a [router-link]="['/Route1/Route11Node']">Route11</a><br>
      &nbsp;&nbsp;<a [router-link]="['/Route1/Route12']">Route12</a><br>
    </nav>
  <h2><router-outlet></router-outlet></h2>
</section>
`
})
@RouteConfig([
  { path: '/route1', component: Route1Node, as: 'Route1Node' },
  { path: '/route1/...', component: Route1, as: 'Route1' }
])
class App {}

bootstrap(App, [
  ROUTER_PROVIDERS,
  provide(ROUTER_PRIMARY_COMPONENT,{useValue:App})
]);

Route1
  Route11
  Route12