[Angular2]Angular2触ってみた part4 Routing


https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
チュートリアル最後の章、ルーティング。

Angular2でのルーティングはこんな感じになります

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

import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';

@Component({
    selector: 'my-app',
    template: `

<h1>{{title}}</h1>


<nav>
      <a [routerLink]="['Dashboard']">Dashboard</a>
      <a [routerLink]="['Heroes']">Heroes</a>
    </nav>

    <router-outlet></router-outlet>
  `,
    styleUrls: ['app/app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ]
})
@RouteConfig([
    {
        path: '/dashboard', //urlのパスを記述
        name: 'Dashboard', //名前(識別子?)を記述
        component: DashboardComponent,
        useAsDefault: true
    },
    {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    },
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    }
])
export class AppComponent {
    title = 'Tour of Heroes';
}

Componentでは、template、及びCSSをjsファイルの外に出して読み込むことができます。
template:&lt;div&gt;hoghoge〜&lt;/div&gt;
などとjsファイルにベタベタ書いていくより見栄えがよく読みやすくなりますね。

import {OnInit, Component} from "angular2/core";
import {HeroDetailComponent} from "./hero-detail.component";
import {Hero} from './hero';
import {HeroService} from "./hero.service";
import {Router} from "angular2/router";
@Component({
    selector: 'my-heroes', //このコンポーネントを使用するときのセレクタを宣言
    templateUrl:'app/heroes.component.html',//htmlテンプレートのパスを記述
    styleUrls:['app/heroes.component.css'], //このコンポーネントで使用するCSSを宣言
    directives:[HeroDetailComponent] //このコンポーネントが内部で使用するディレクティブを宣言(依存関係)
})
export class HeroesComponent implements OnInit {
    heroes: Hero[];
    selectedHero: Hero;
    constructor(
        private _router: Router,
        private _heroService: HeroService) { }
    getHeroes() {
        this._heroService.getHeroes().then(heroes => this.heroes = heroes);
    }
    ngOnInit() {
        this.getHeroes();
    }
    onSelect(hero: Hero) { this.selectedHero = hero; }
    gotoDetail() {
        this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
    }
}