Angular> 카테고리로 상품 출력

순서

1. Spring boot 수정 - entity id 설정

2. Angular에서 Product Category class 생성

3. menu component 생성

4. prduct service로부터 데이터를 읽기 위해 menu component 수정

5. Spring boot 에 url 요청하기 위해 product service 업데이트

6. HTML에서 menu component 링크 수정

 

---

 

1. Spring boot 수정 - entity id 설정 

Rest api에서 entity의 id가 보여지도록 설정하는 방법

 

MyDataRestConfig.java

 

2. 

ProductCategory 클래스 생성

 

3.

 

컴포넌트 생성 

 

4.

컴포넌트는 서비스에서 ProductCategory 클래스 객체를 가져와 배열에 담는다. 

 

5.

 JSON Data 에서 ProductCategory 배열로 Mapping 하는 과정이다. 

JSON을 GetResponseProductCategory 인터페이스에 넣고 productCategory[] 를 뽑아 반환한다. 

 

서비스는 REST API에서  ProductCategory 객체 배열을 반환

컴포넌트는 서비스에서 반환한 것을 받아서 배열에 저장.

 

 

6.

app-product-category-menu 태그를 보고

product-category-menu.component.html 을 출력

이 컴포넌트의 ts에서는 service를 통해 category 객체 리스트를 가져오고 html에서 이용한다. 

 

 

 

log를 웹브라우저에서 보는 방법

edge는 오른쪽 클릭 - 검사 - 콘솔 탭

chrome은 도구 더 보기 - 개발자도구 - 콘솔 탭

 

 

---

부록 : 카테고리 이름을 보여주는 방법

 

1.

app.module.ts

Route 설정

 

2.

product-category-menu.component.html 

product category component에 있는 ts에서 service를 통해

product category 테이블에서 객체 리스트를 가져오고

ts에 두면 html에서 배열을 가져다 쓸 수 있다.

이 정보로 Router Link 구성

 

3.

product-list.component.ts

 

Route link 클릭 시 route 기능이 있는 ts에서 router가 적절한 route를 선택하고 url에 있는 parameter 매칭한다. 

이걸로 ts에서 조건문을 두고 값이 있는 지 없는 지 판별한 다음 service로 해당 카테고리 id의 아이템을 가져온다.

가져온 걸 product 클래스 객체 배열에다가 넣는다. 

id로 검색하는 거니까 service 메서드 입력단자에 category 이름을 입력할 필요 없다. 

 

 

4. 

 

해당 컴포넌트의 html에서 데이터를 사용.