4. Service | EastFlag

모델 역할로서의 Service

angular cli로 서비스 생성

ng g service hero

1	ng g service hero

@Injectable은 서비스를 angular IOC 컨테이너에 등록하는 과정이다.

heroes mock 데이터를 리턴하는 메서드를 추가

  getHeroes(): Hero[] {
    return HEROES;
  }

getHeroes(): Hero[] {

return HEROES;

}

heroes 컴포넌트에서 이제 서비스를 주입받자. 주입받는 방법은 생성자를 통해서 이미 등록된 서비스를 주입받는다.

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.heroes = this.heroService.getHeroes();
  }

selectedHero: Hero;

constructor(private heroService: HeroService) { }

ngOnInit() {

this.heroes = this.heroService.getHeroes();

}

그러면 angular IOC 컨테이너가 new HeroesComponent(heroService) 로 생성자함수를 통해서 컴포넌트를 생성할때 이미 등록된 heroService를 생성자로 주입하게 된다.

데이터를 Observable로 변환

import {Observable, of} from 'rxjs';

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }

import {Observable, of} from 'rxjs';

getHeroes(): Observable<Hero[]> {

return of(HEROES);

}

이제 subscribe로 데이터를 받는다.

  ngOnInit() {
    this.heroService.getHeroes()
      .subscribe(data => this.heroes = data);
  }

ngOnInit() {

this.heroService.getHeroes()

.subscribe(data => this.heroes = data);

}

로드 중…