<!DOCTYPE html>
<html>

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

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>
/* Styles go here */

input {
  width: 100%;
}
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/angular2';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {LoopRoute} from './LoopRoute';


@RouteConfig([
    { path: '/...', component: LoopRoute, as: 'LoopRoute' }
])
@Component({
  selector: 'my-app'
})
@View({
  directives: [ROUTER_DIRECTIVES],
  template: `
    <div>
      <input type="text" [value]="'LOCATION: ' + currentLocation.hash" disabled/>
      <router-outlet></router-outlet>
    </div>
  `
})
export class App {
  constructor() {
    this.currentLocation = window.location;
  }
}


import {bootstrap, bind} from 'angular2/angular2';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {App} from './app';


bootstrap(App, [
    ROUTER_PROVIDERS,
    bind(LocationStrategy).toClass(HashLocationStrategy)
  ])
  .catch(err => console.error(err));
import {Component, View} from 'angular2/angular2';


@Component({
  selector: 'loop-home'
})
@View({
  directives: [],
  template: `<p>LoopHome</p>`
})
export class LoopHome {}



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


@RouteConfig([
    { path: '/', component: LoopHome, as: 'LooperHome' },
    { path: '/looper/...', component: LoopRoute, as: 'Looper' }
])
@Component({
  selector: 'loop-route'
})
@View({
  directives: [ROUTER_DIRECTIVES],
  template: `
    <div style="border: 1px solid #000; margin: 5px; padding: 5px;">
      <button [router-link]="['./Looper/LooperHome']">GO DEEPER</button>
      <button [router-link]="['./LooperHome']">GO LOOP HOME</button>
      <router-outlet></router-outlet>
    </div>
  `
})
export class LoopRoute {}