[AngularJS 2.0] AngularJS 2.0 Tutorial2_service

Angular.io 에서 제공하는 튜토리얼을 정리한 것입니다.

사진 클릭시 튜토리얼로 이동

!! RC4기준 !!

5. Service

1. 폴더 구조

2. Chapter4의 issue

- hero를 정의하는 것은 컴포넌트의 일이 아니다.

- 공유하기가 쉽지 않다.

new 키워드를 대체하기 위하여

private property를 정의하기 위해 constructor를 추가.

constructor를 사용하기 위하여 컴포넌트에 provider 사용.

3. app.component.ts

import { Component, OnInit } from '@angular/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="let 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 {
    title = 'Tour of Heroes';
    heroes: Hero[];
    selectedHero: Hero;
    constructor(private heroService: HeroService) { }
    getHeroes() {
        this.heroService.getHeroes().then(heroes => this.heroes = heroes);
    }
    ngOnInit() {
        this.getHeroes();
    }
    onSelect(hero: Hero) { this.selectedHero = hero; }
}

 

[line 21] Provider : Component에서 사용할 의존성을 알려줌

[line 28] constructor에 파라미터로 의존성 만들기

[line 32] ngOnInit : 컴포넌트의 생명 주기 동안 Angular에서 자동 호출 

4. hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
    getHeroes() {
        return Promise.resolve(HEROES);
    }
}

[line 7] Promise : 지켜보다가 정보가 나타나면 얘기해줌, HTTP 요청관리

 then : promise 객체의 callback function 지정

5. mock-heroes.ts

import { Hero } from './hero';
export const HEROES: Hero[] = [
    {id: 11, name: 'Mr. Nice'},
    {id: 12, name: 'Narco'},
    {id: 13, name: 'Bombasto'},
    {id: 14, name: 'Celeritas'},
    {id: 15, name: 'Magneta'},
    {id: 16, name: 'RubberMan'},
    {id: 17, name: 'Dynama'},
    {id: 18, name: 'Dr IQ'},
    {id: 19, name: 'Magma'},
    {id: 20, name: 'Tornado'}
];

6. 정리

Service는 전체 Application에서 공유하고, DI를 통하여 객체를 전달한다.