[Angular2]Angular2触ってみた part3


https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

新しく書き方が一新されたDependency Injectionと、それを用いて肥大化するアプリケーションコードを適切に分割統治する方法について記述されています。

インジェクション先

import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';

@Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="#hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
  `,
    directives: [HeroDetailComponent],
    providers: [HeroService] //インジェクションするクラスをこの配列で指定する
})
export class AppComponent implements OnInit {
    //イニシャライズメソッド
    ngOnInit() {
        this.getHeroes();
    }

    constructor(private _heroService:HeroService) {
        //providers配列で指定したサービスがフィールドにインジェクションされる
    }

    title = 'Tour of Heroes';
    heroes:Hero[];
    selectedHero:Hero;

    onSelect(hero:Hero) {
        this.selectedHero = hero;
    }

    getHeroes() {
        this._heroService.getHeroes().then(heroes=>this.heroes = heroes);
    }
}

インジェクション元

import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import {Injectable} from 'angular2/core';
import resolve = Promise.resolve;

@Injectable() //このアノテーションを宣言することで、DIコンテナーに登録でき、「providers」で指定できるようになる
export class HeroService {
    getHeroes() {

        return Promise.resolve(HEROES);
    }

    getHeroesSlow() {
        return new Promise<Hero[]>(resolve=> {
            setTimeout(()=>resolve(HEROES), 2000)
        });
    }
}

元サイトでも注釈がありましたが、親コンポーネントでprovider指定されているインスタンスは、子コンポーネントではprovider指定なしでDIすることができるようになります。