서비스
영웅 관광 HeroesComponent는 현재 얻은 가짜 데이터를 표시 한다.
이 튜토리얼에서 다음의 리팩토링은 HeroesComponent은 뷰를 지원함에 있어 선택과 집중 할수 있다. 또한 목 서비스와 같이 단위테스트 쉽게 되게 할수 있다.
왜 서비스냐?
컴포넌트는 데이터를 직접가저오거나 바로 저장 하면 안된고 현재에 틀림없이 가짜 데이터라는것을 알고도 하면 안된다. 데이터 프리젠팅, 데이터 접근을 서비스로 위함하는데 집중해야 한다.
이 튜토리얼에서 모든 애플리케이션 클래스들이 영웅을 얻을 때 사용 할수 있는 HeroService 만들수 있다. 새로운 서비스를 만들는거 대신에, HeroesComponent 생성자로 주입하는 앵귤라 의존성 주입에 의지 할 수 있다.
서비스는 알수없는 서로 다른 것을 클래스 사이에서 정보를 공유하기 좋은 방법이다. MessageService를 생성할수 있고 그것을 두곳에 주입 합니다.
HeroService에서는 서비스를 사용하여 메세지를 보낸다.
MessagesComponent에서는 메세지를 표시한다.
HeroService 생성
Angular CLI을 사용해 영웅을 호출하는 서비스를 생성합니다.
ng generate service hero
그 명령은 src/app/hero.service.ts 안에 HeroService 클래스의 뼈대를 자동생성합니다.
PS D:\workspace\dev\angular02\angular-tour-of-heroes> ng generate service hero
create src/app/hero.service.spec.ts (362 bytes)
create src/app/hero.service.ts (110 bytes)
서비스는 테스트과 기능의 ts 파일 두개만 생성 하네요.
src/app/hero.service.ts (new service)
import { Injectable } from '@angular/core';
@Injectable()
export class HeroService {
constructor() { }
}
@Injectable() 서비스
새로운 서비스는 앵귤라 Injectable 기호를 import 하고 @Injectable() 데코레이터를 클래스 옆에 애노테이트한것을 알수 있다.
@Injectable() 데코레이터는 Angular에게 이 서비스는 아마 그 자신은 주입된 의존성을 가진다라고 알려준다. 이것은 지금 의존성을 가지고 있지 않지만 곧 갖게 될것이다. 할수 있는지 혹은 할수 없든 decorator를 유지하는 것이 좋습니다.
앵귤라 스타일 가이드라인을 지키도록 강하게 권고하고 부스러기 린터는 그 룰대로 집행합니다.
영웅 데이터 얻기
HeroService 영웅 데이터는 웹서비스, local storage, 혹은 가짜 데이터 중 어디서나 얻울수 있다.
콤포넌트에서 데이터 접근을 제거 하는것은 변할수 있는 너의 마음에 대해 언제든지, 어떤 컴포넌트의 간섭 없이 구현하는것을 의미한다. 그들은 서비스가 어떻게 일하는지 알수 없다.
이 튜토리얼 안에서 가짜 영웅들을 제공 하는것을 구현 할수 있다.
Her 와 HEROES Import
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
mock 영웅을 리턴하는 getHeroes 메소드를 추가한다.
getHeroes(): Hero[] {
return HEROES;
}
HeroService 제공
의존성 주입 시스템에 HeroService를 제공해야 앵귤라가 HeroesComponent에 HeroService를 주입 할수 있다.
AppModule에 AppComponent안의 HeroesComponent에서 HeroService를 제공하는데에 몇몇방법이 있다. 각각 선택은 장단점을 가진다.
이 튜토리얼은 AppModule에서 제공하는것을 원한다.
앞서말한 인기있는 선택은 당신이 CLI에 전할수 있는 선택자 이다. --module=app 추가하면 자동적으로
ng generate service hero --module=app
AppModule 클래스를 열고, HeroService를 import 하고 , @NgModule.providers 배열을 추가한다.
src/app/app.module.ts (providers)
providers: [
HeroService,
/* . . . */
],
providers 배열은 HeroService의 인스턴스를 공유하고, 그것을 뭍는 어떤 클래스로 주입하도록 앵귤라가 지시한다.
HeroService는 HeroesComponent에 지금 연결될 준비가 됬습니다.
이것은 잠정적인 코드 샘플이다. HeroService를 제공하고 사용하는것을 허락한다. 이쯤에서, "최종 코드리뷰"안에 HeroService에서 코드는 다른 것이다.
Providers 가이드에서 제공자에 대하여 더 배웁니다.
HeroesComponent 업데이트
HeroesComponent 클래스 파일을 열어라.
더이상 원하지 않은 HEROES import를 삭제한다. 대신에 HeroService를 포함 합니다.
src/app/heroes/heroes.component.ts (import HeroService)
import { HeroService } from '../hero.service';
영웅 속성의 정의를 간단 선언으로 변경합니다.
heroes: Hero[];
HeroService 주입
생성자에 HeroService 타입의 개인 heroService 파라메터를 추가합니다.
constructor(private heroService: HeroService) { }
개인 heroService 속성을 파라메터는 동시에 정의되고 HeroService 주입 위치를 확인한다.
HeroesComponent를 앵규라가 생성할때, 의존성 주입 시스템은 heroService 파라메터를 HeroService의 싱글톤 인스턴스로 설정된다.
getHeroes() 추가
함수를 서비스에서 영웅들을 되찾아오는 것을 생성합니다.
getHeroes(): void {
this.heroes = this.heroService.getHeroes();
}
ngOnInit 에서 요청
생성자에서 getHeroes() 실행 할때, 좋은 엽습이 아니다.
속성에 와이어 링 생성자 매개 변수와 같은 간단한 초기화를 위해 생성자를 예약하십시오. 생성자는 아무 것도해서는 안됩니다. 실제 데이터 서비스처럼 원격 서버에 HTTP 요청을하는 함수를 호출해서는 안됩니다.
대신에 getHeroes()를 ngOnInit 라이프사이틀 후크 내에서 호출하고, HeroesComponent 인스턴스를 생성한후 적절한 시점에 앵귤라는 ngOnInit를 호출 합니다.
ngOnInit() {
this.getHeroes();
}
실행 보기
브라우저가 새로 고침되면 앱이 이전과 같이 실행되어 영웅의 목록과 영웅 이름을 클릭하면 영웅 상세보기가 표시됩니다.