angular2.a36 + ts + vaading-grid + routing example + scripted routing page changing

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular2 playground</title>
</head>

<body>
  
<script src='https://cdn.vaadin.com/vaadin-components/0.3.0-beta7/webcomponentsjs/webcomponents-lite.js'></script>
<link href='https://cdn.vaadin.com/vaadin-components/0.3.0-beta7/vaadin-grid/vaadin-grid.html' rel='import'>
  
    <app>Loading...</app> 
</body> 

<!-- ES6-related imports -->
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script src="config.js"></script>
<!-- Angular2 import -->
<script src="http://code.angularjs.org/2.0.0-alpha.36/angular2.dev.js"></script>
<script src="http://code.angularjs.org/2.0.0-alpha.36/router.dev.js"></script>


<script>
    //bootstrap the Angular2 application
    System.import('app').catch(console.log.bind(console));
</script>


</html>

import {View, Component, bind, bootstrap} from 'angular2/angular2';
import {ROUTER_BINDINGS, RouteConfig, Router, RouterOutlet, Route, RouterLink, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {Page1} from 'src/page1';
import {Page2} from 'src/page2';

@Component({
  selector: 'app',
})
@View({
  template: `
    <h1>Landing page</h1>
    Go to:
    <a [router-link]=["./page1"]>Page 1</a>
    <a [router-link]=["./page2"]>Page 2</a>
    
    <a (click)="onClick()" href="#">Route via script</a>
    Other page:
    <router-outlet></router-outlet>
  `,
  directives: [RouterOutlet, RouterLink],
})
@RouteConfig([
  { path: '/page1', component: Page1, as: 'page1' },
  { path: '/page2', component: Page2, as: 'page2' }
])
export class App {
  constructor(router: Router) {
    this.router = router;
  }
  
  onClick(): void {
    this.router.navigate('/page1');
 }
}

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

System.config({
        defaultJSExtensions: true,
        transpiler: 'typescript',
        typescriptOptions: {
          emitDecoratorMetadata: true
        },
        map: {
          typescript: 'https://cdn.rawgit.com/robwormald/9883afae87bffa2f4e00/raw/8bca570a696c47a4f8dd03a52c98734676e94cea/typescript.js'
          
        },
        paths: {
          app: 'src'
        },
        packages: {
          app: {
            main: 'app.ts',
            defaultExtension: 'ts',
          }
        }
    });

import {Component, View, bootstrap, CORE_DIRECTIVES} from 'angular2/angular2';

@Component({
    selector: 'page1',
    
})
@View({
  template: `
  
  
<vaadin-grid #grid (select)="onSelect()">
  <table>
    <colgroup>
      <col header-text="Name">
      <col header-text="Value">
      <col header-text="Progress">
    </colgroup>
    <tbody>
      <tr>
        <td>Project A</td><td>10000</td><td>0.8</td>
      </tr>
      <tr>
        <td>Project B</td><td>999999</td><td>0.8</td>
      </tr>
    </tbody>
  </table>
</vaadin-grid>
  `,
  directives: [CORE_DIRECTIVES]

})
export class Page1 {
  grid = document.querySelector('vaadin-grid');
  constructor() {
  }
  
  onSelect(): void {
    const selectedIndex = this.grid.selection.selected()[0];
    this.grid.data.getItem(selectedIndex, (err, data) => console.log(data));
    
  }
  
  open(): void {
    console.log('open!');
  }
}

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

@Component({
  selector: 'page2',
})
@View({
  template: `
    <h1>Welcome on page2</h1>
  `,
  directives: [],
})
export class Page2 {
}