Angular2 + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/2.0.0-beta.0/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="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/router.dev.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <base href="/">
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular2 Starter Plunker - Typescript - Beta 0

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.

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 {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS} from 'angular2/router';

import 'rxjs/Rx';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS
]);

import {Component} from 'angular2/core';
import {NavigationComponent} from './navigation.component'
import {PageComponent} from './page.component'
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
    selector: 'my-app',
    template: `<h1>My First Angular 2 App</h1>
               <navigation></navigation>

               <router-outlet></router-outlet>
    `,
    directives: [NavigationComponent, ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path:'/page/:id', name: 'Page', component: PageComponent}
])
export class AppComponent { }

import {Component, OnInit} from 'angular2/core';
import {MenuItem}          from './menuitem.model';
import {HTTP_PROVIDERS}    from 'angular2/http';
import {Router}            from 'angular2/router';

@Component({
    selector: 'navigation',
    template: `
  <h3>Navigation:</h3>
  <ul>
    <li *ngFor="#menuItem of menuItems" (click)="onSelect(menuItem)">
      {{ menuItem.title }}

      <ul>
        <li *ngFor="#menuChildrenItem of menuItem.children">
            {{ menuChildrenItem.title }}
        </li>
      </ul>
    </li>
  </ul>
  `,
    providers: [HTTP_PROVIDERS]
})
export class NavigationComponent implements OnInit {
    constructor (
        private router: Router) {

    }

    errorMessage: string;
    menuItems : MenuItem[];

    ngOnInit() {
        this.menuItems = [];

        var test = {} as MenuItem;
        test.id = 10;
        test.title = "test";
        test.object_id = 10;
        test.type_label = "page";

        this.menuItems.push(test);
    }

    onSelect(menuItem : MenuItem) {
        this.router.navigate(['Page', { id: 10 }]);
    }
}

import {Component, OnInit}   from 'angular2/core';
import {RouteParams, Router} from 'angular2/router';
import {Page}                from './page.model';
import {HTTP_PROVIDERS}      from 'angular2/http';

@Component({
    template: `
        <h2>Page: {{ page }}</h2>
        <h3>test page</h3>
    `,
    providers: [HTTP_PROVIDERS]
})

export class PageComponent implements OnInit {
    page : Page;
    errorMessage: string;

    constructor (
        ) {
    }

    ngOnInit(){
        this.page = new Page(10);
    }
}

export interface MenuItem {
    id: number,
    title: string,
    parent: number,
    url: string,
    type_label: string,
    object_id: number,
    children: MenuItem;
}

export class Page {
    id : number;

    constructor(json: any){
        this.id = json.id;
    }
}