Angular> Front end - Product List

순서

1. Angular 프로젝트 만들기

2. Angular component 만들기

3. TypeScript 클래스 만들기

4. Angular Service 만들기 REST API를 위한

5. Angular service에서 데이터를 얻기 위해 Angular component 업데이트 

6. HTML에 데이터 표현

7. Spring Boot app에 CrossOrigin 넣기

 

 

---

1. 2. Angular project setup

ng new angular-ecommerce

 

부트스트랩 복사하고 index.html에 붙여넣기

 

app.component.html 모두 삭제하고 내용 넣기

 

ng generate component components/product-list

app.component.html에 product-list.component.ts에 있는 selector 인 <app-product-list>를 넣는다. 

 

3. 4. product 클래스와 서비스를 만들기

ng generate class common/product

클래스를 만드는데 오류가 뜬다

Property has no initializer and is not definitely assigned in the constructor

해결법은 tsconfig.json에서 compilerOptions에 "strictPropertyInitialization":false를 추가한다.

 

REST API를 요청하기위해서 Angular service를 만든다. 

 

ng generate service services/product

HttpClientModule, ProductService 쓰기

 

서버에 이런 JSON이 있는데 이걸 service로 가져와서 front에서 출력한다. 

 

 

 

 

5. 6. Angular Component에서 Service으로 얻은 데이터를 HTML에서 보여주기

 

localhost:8080/api/products에서 가져와 

localhost:4200에서 보여주려고 해도 오류가 나는데 

crossOrigin 기능을 써야한다. 

 

7. CrossOrigin support to spring boot app

Product와 ProductCategory Repository에 어노테이션을 추가해야 한다. 

Origin 은 protocol + hostname + port 이다. 

4200 과 8080은 포트가 다르니 different origin

 

 

 

마무리로 테이블로 만들어 보자.

 

 

 

이미지를 보여주는 방법으로 데이터베이스에 경로 데이터를 넣고

html에서는 데이터베이스에서 읽은 경로를 img src 태그에 넣고

프로젝트 리소스 폴더 경로에 맞는 이미지를 두면 된다.