import { bind } from 'angular2/di';
import { Component, View, bootstrap } from 'angular2/angular2';
import { Route, Router, RouteConfig, RouteParams, LocationStrategy, HashLocationStrategy, routerInjectables, routerDirectives } from 'angular2/router';

@Component({
  selector: 'hello'
})
@View({
  template: `<p>Hello, {{ name }}!</p>`
})
class Hello {
  constructor() {
    this.name = 'Angular';
  }
}

@Component({
  selector: 'ciao'
})
@View({
  template: `<p>Ciao, {{ name }}!</p>`
})
class Hello {
  constructor() {
    this.name = 'Angular';
  }
}

@Component({
  selector: 'hello-app'
})
@View({
  directives: [Hello, routerDirectives],
  template: `
    <ul>
      <li><a [router-link]="['/hello']">Hello</a></li>
      <li><a [router-link]="['/ciao']">Ciao</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
})
@RouteConfig([
  new Route({ path: '/', component: Hello, as: 'hello' }),
  new Route({ path: '/ciao', component: Ciao, as: 'ciao' })
])
class HelloApp {
  constructor() {
  }
}

bootstrap(HelloApp, [
  routerInjectables,
  bind(LocationStrategy).toClass(HashLocationStrategy)
]);