Route nested page example

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="config.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.54/http.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.54/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.54/Rx.min.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.54/Rx.umd.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.54/angular2.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.54/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.54/angular2-all.umd.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.54/router.dev.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

<body>
  
  <app>Loading....</app>
</body>

</html>

//main entry point
import {HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';
import {bind} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {App} from './app';

bootstrap(App, [
  HTTP_PROVIDERS, ROUTER_PROVIDERS,
  bind(LocationStrategy).toClass(HashLocationStrategy)
]);

//our root app component
import {Component, View} from 'angular2/core'
import {ROUTER_DIRECTIVES, RouteConfig, Router} from 'angular2/router';
import {Home} from './Home';
import {Nested} from './Nested';

@Component({
  selector: 'app'
})
@View({
  templateUrl: 'views/home.html',
  directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/', component: Home, as: 'Home'},
  {
    path: '/nested/...',
    component: Nested,
    as: 'Nested'
  }
])

export class App {
  constructor(public router:Router){}
}

router.lastNavigationAttempt: {{router.lastNavigationAttempt}}<br/>
<button (click)="router.navigateByUrl('/')">Home by Url</button><br/>
<button (click)="router.navigateByUrl('/nested/page')">Nested Page by Url</button><br/>
<button (click)="router.navigate(['/Home'])">Home</button><br/>
<button (click)="router.navigate(['/Nested', 'Page'])">Nested Page</button><br/>
<button (click)="router.renavigate()">Reload</button><br/>
<a [routerLink]="['/Home']">Home</a><br/>
<a [routerLink]="['/Nested', 'Page']">Nested Page</a><br/>
<br/>

<router-outlet></router-outlet>

import {Component, View} from 'angular2/core';
import { Router } from 'angular2/router';

@Component({
  selector: 'home'
})
@View({
  template: 'Home'
})
export class Home {
  constructor(public router:Router){}
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

import {Component, View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Page} from './Page';

@Component({
  selector: 'nested'
})
@View({
  template: `Nested <router-outlet></router-outlet>`,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {
    path: '/page',
    component: Page,
    as: 'Page'
  }
])
export class Nested {
}

import {Component, View} from 'angular2/core';

@Component({
  selector: 'page'
})
@View({
  template: 'Page'
})
export class Page {
}