서비스

HeroesComponent에 데이터까지 기재되어 있다.
HeroesComponent로부터 데이터를 분리하여 유닛 테스트 등을 쉽게 할 수 있도록 한다.

왜 서비스가 필요한가?

컴포넌트 내에서 직접 데이터를 얻거나 저장해서는 안됩니다.
물론 고의로 임시 데이터를 전달해서는 안됩니다.
컴퍼넌트는 데이터의 전달에 집중해, 그 외의 처리는 서비스 클래스에 위양해야 합니다.

구성 요소 정의
htps : // 이 m / 폽 ky_ 세 / ms / 3 97506 81

컴포넌트 = 컴포넌트
요컨대 화면을 구성하는 부품.

그래서 실제로 표시되는 데이터 자체는 독립시켜 봅시다!

아래에서 응용 프로그램 전체에서 영웅을 얻을 수있는 HeroService를 만듭니다.
그 서비스는 new 로 생성하는 것이 아니라 Angular 에 의한 의존성의 주입 (소위 DI) 로 HeroesComponent 생성자 에 주입합니다.
DI에 대해서는 아래 등을 참조하십시오.
htps : // m / h shi / ms / 1136087 1c6 5c5b0d9f

요컨대, 여기에서는 단순히 데이터의 분리를 의미하고 있는 것 같습니다.

HeroService 만들기

ionic CLI로 작성해 봅시다.
명령은 다음과 같습니다.

ionic generate provider hero

service가 아니라 provider입니다. 조심하세요.
아래와 같이 작성되었는지 확인하십시오.

영웅 데이터 획득

HeroService는 다양한 위치에서 영웅 데이터를 검색할 수 있습니다. — 외부 웹 서비스, 로컬 스토리지 또는 모의 데이터일 수 있습니다.
컴퍼넌트로부터 데이터 취득 로직을 분리한다는 것은, 그러한 서비스측의 사정에 얽매이지 않고, 언제라도 구현 방침의 변경을 할 수 있는 것을 의미하고 있습니다. 컴퍼넌트측은, 서비스가 어떻게 움직이고 있어도 상관없습니다.
이 장의 구현은 여전히 ​​모의 영웅을 사용합니다.

아래와 같이 변경합니다. (클래스 이름은 HeroProvider로 남겨 둡니다)
덧붙여 디폴트의 constructor 은 httpClient 를 사용하므로 일단 코멘트 아웃했습니다. (다음 정도의 튜토리얼에 나옵니다)

HeroService 제공

의존성 주입할 수 있도록 하는 운명의 이야기가 있습니다만, generate provider로 작성한 경우는 벌써 아래와 같이 등록되어 있을 것입니다.

HeroesComponent 업데이트 및 주입

HeroesComponent도 함께 바꾸어 갑시다.
HEROES 가져오기를 제거하고 대신 HeroService(HeroProvider)를 가져옵니다.
heroes 속성 정의를 간단한 배열 선언으로 바꿉니다.
한층 더 getHeroes()를 추가해, Service(Provider)로부터 히어로를 읽어들이도록(듯이) 합니다.
그리고 마지막으로 ngOnInit에서 getHeroes 메소드 호출을 작성합니다.


여기까지 실제로 serve 해 보고 확인하면, 변함없이 동작할 것입니다.
모의 히어로를 사용해 주고 있으므로, 표시는 아무것도 바뀌지 않습니다만….