Untitled

<!DOCTYPE html>
<html>

  <head>
    <title>Router Sample</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
    <!-- Add the router library -->
    <script src="https://code.angularjs.org/2.0.0-beta.1/router.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
    <!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
  </body>

</html>

// Code goes here

/* Styles go here */

import {TableRootComponent} from "./table-root.component";
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES} from "angular2/router";
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
      <h1>AppComponent</h1>
      <a [routerLink]="['TableRoot', {tableId : 1}]">TableRoot 1</a>
      <a [routerLink]="['TableRoot', {tableId : 2}]">TableRoot 2</a>
      <hr>
      <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: []
})

@RouteConfig([
  {path:'/', redirectTo:['TableRoot', {tableId: 1 }] },
  {path:'/tableroot/:tableId/...', name: 'TableRoot', component: TableRootComponent},
])
export class AppComponent { }

import {TableComponent} from "./table.component";
import {DetailComponent} from "./detail.component";
import {NoneComponent} from "./none.component";
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, Router} from "angular2/router";
import {Component} from 'angular2/core';

@Component({
    template: `
      <h2>TableRootComponent</h2>
      <p>ID is: {{tableId}}</p>
      <table-component></table-component>
      <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES, TableComponent],
    providers: []
})

@RouteConfig([
    { path: '', name: 'None', component: NoneComponent, useAsDefault: true },
    { path: '/detail/:id', name: 'Detail', component: DetailComponent }
])
export class TableRootComponent {
  tableId: number

  constructor(routeParams: RouteParams){
    this.tableId = +routeParams.get("tableId");
  }
}

import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
import {Component} from 'angular2/core';

@Component({
    selector: 'table-component'
    template: `
      <h3>TableComponent</h3>
      <a [routerLink]="['Detail', {id: 42}]">Entry 42</a><br>
      <a [routerLink]="['Detail', {id: 43}]">Entry 43</a><br>
      <hr>
      <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})

export class TableComponent { constructor() {}}

import {RouteConfig, RouteParams} from "angular2/router";
import {Component} from 'angular2/core';

@Component({
    template: `
      <h4>DetailComponent</h4>
      <p>Entry Details for: {{detailId}}</p>
      `
})

export class DetailComponent {
  detailId: number

  constructor(routeParams: RouteParams){
    this.detailId = +routeParams.get("id");
  }
}

import {bootstrap}         from 'angular2/platform/browser';
import {ROUTER_PROVIDERS}  from 'angular2/router';
import {AppComponent}      from './app.component';
import {provide}           from 'angular2/core';
import {LocationStrategy, HashLocationStrategy} from 'angular2/router';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy,
         {useClass: HashLocationStrategy})
]);

import {Component} from 'angular2/core';

@Component({
    selector: 'none',
    template: `
      <h4>NoneComponent</h4>
      <p>Nothing Selected</p>
      `
})

export class NoneComponent {
  constructor() {}
}