5. Typescript Basic, Service class

参考ページ

Angular入門 未経験から1ヶ月でサービス作れるようにする その5. サービスとTypescriptの基礎 - Qiita

---

Angula에서의 데이터관리 기초

API엑세스나 컴포넌트를 걸친 데이터관리를 함.

ProductService 클래스를 통해 Product의 데이터관리를 컴포넌트 밖으로 내보내보자고.

product.service.ts

＠Injectable

서비스클래스로 지정해줌.

4~root차원에서 이 서비스를 이용하는 것을 의미.

서비스클래스는 지정한 provideIn단위로 인스턴스화되어 (이번엔 root레벨, 즉 프로젝트 전체) 하나의 인스턴스가 사용됨. 소위말하는 싱글턴에 가까운 상태라고 생각하는 것이 좋을 것 같음.

최종적으로는 여기에서 API접근을 하게되지만 지금은 일단 패스.

import등 단축키 Shft Alt . 

---

product.service.ts

list()는 Observable한 Product의 배열을 반환하는 메서드가 됨.

본 코드는 API통신이 없으므로 동기처리가 되지만 최종적으로는 API통신을 할것이기 때문에 list()메소드는 비동기처리가 됨.

Angular는 비동기처리에 RxJS를 이용함. Observable이라는것은 RxJS의 클래스며 비동기처리에 있어서 메인클래스가 됨. 아직은 Promise와 같은 것이라고 생각하면 될 것 같음.

of라는 것은 RxJS의 메소드고, 주어진 내용으로 Observable을 만드는 것임.

---

product-list.component.ts 의 constructor 

contructor에서 ProductService인수 호출함으로써 ProductService를 컴포넌트나 서비스에 삽입할 수 있음(이른바 DI)

즉 이 코드로 ProductListComponent에 productService라고 하는 변수가 생성된 것임.

this.productService.list()는 Observable<Product[]>을 반환.

subscribe는 Observable의 메서드이며, 타겟 Observable의 관측을 시작하는 것. (API엑세스의 비동기 처리를 개시)

관측이 완료되면 subscribe의 인수의 콜백메소드가 호출됨. 이 인수는 Observable<Product[]>의 Product[]가 들어가게 됨.

ProductService의 list()메소드에서 반환된 배열이 이 메소드에 들어가게 됨. 그리고 products 인스턴스 변수에 대입되고

products를 표시하도록 기재돼있는 View에 반영 됨.

---

product-detail.component.ts로부터 ProductService 이용

ProductService에 id로 상품을 취득할수있는 메소드를 추가

product-detail.component.ts에서 이용