[Angular] Angular 시작하기(local ver.) - (3) 장바구니 기능 구현

https://angular.kr/start/start-data

Angular 가이드

---

장바구니 서비스 정의하기

 

1. 장바구니 서비스 생성(Angular Generator → Service)

 

app 폴더 아래에 'cart'라는 이름의 service를 추가하기 위한 명령어 사용

ng generate service cart

 

이렇게 두 개의 파일 생성

 

~cart.service.ts 확인~

 

 

 

2. CartService 클래스 안에 items 프로퍼티(장바구니에 담긴 상품을 저장하는 배열) 정의

 

 

3. 장바구니에 상품을 추가하는 메서드와 장바구니에 담긴 상품 목록을 반환하는 메서드, 장바구니를 비우는 메서드 정의

---

장바구니 서비스 활용하기

 

1. product-details.component.ts 파일에 장바구니 서비스 불러오기

 

 

 

2. 불러온 장바구니 서비스를 constructor( )에 추가하여 의존성으로 주입

 

 

3. 컴포넌트에 addToCart( ) 메서드 추가

현재 사용자가 보는 상품을 장바구니에 추가하는 메서드

addToCart( ) 메서드는 현재 product를 인자로 받고 CartService addToCart( ) 메서드를 사용해 인자로 받은 상품을 장바구니에 추가하고 장바구니에 상품이 추가되었다는 메시지를 화면에 표시

 

 

4. product-details.component.html에 Buy 버튼을 추가하고 이 버튼의 click 이벤트를 addToCart( ) 메서드와 바인딩

 

~화면 확인~

상품 상세 설명 페이지에서 Buy 버튼 클릭 시 안내 메시지 표시 완료

---

장바구니 컴포넌트 구성

 

1. app 폴더에 명령어로 'cart'라는 이름의 컴포넌트 생성

ng generate component cart

 

 cart.component.ts ▼

 

 

 

2. app.module.ts 파일에 CartComponent와 연결되는 라우팅 규칙 추가

path는 cart로 지정

점선은 명령어로 컴포넌트 생성시 자동으로 설정되는 것

 

 

3. top-bar.component.html을 routerLink 디렉티브를 Checkout 버튼에 연결해 /cart URL로 연결되도록 수정

 

~화면 확인~

Checkout 버튼을 클릭하면 이런 화면이 나옴

---

장바구니 목록 표시하기

 

1. cart.component.ts에 CartService(cart.service.ts 파일에 정의) 심볼 불러오기

 

 

 

2. CartComponent의 constructor( )에 CartService를 의존성으로 주입

 

아놔 이미지 안의 ㅊ은 이미지 편집하다 들어감.. cartService: CartService 입니다

 

 

 

3. 장바구니 목록을 저장할 items 프로퍼티를 정의

CartService getItems( ) 메서드를 활용해 상품 목록을 가져옴

→ 이 메서드는 cart.service.ts를 생성할 때 정의함

 

 

4. 장바구니 컴포넌트 템플릿 수정

*ngFor 디렉티브를 적용해 장바구니에 담긴 상품마다 이름과 가격 표시

 

 

~화면 및 동작 확인~

상품 상세 설명 페이지에서 Buy 버튼을 클릭한 후 Checkout 버튼을 누르면 장바구니에 담긴 상품을 확인할 수 있음

---

서버는 스트림 형태로 데이터를 반환하기도 함. 이런 스트림 형태의 데이터는 원하는 대로 변형하기 쉽기 때문에 활용하기도 좋음. Angular가 기본으로 제공하는 HttpClient는 외부 API에 접근해 스트림 형태로 데이터를 받아오는 서비스.

 

HttpClient를 사용해 외부 파일에 있는 배송 가격 받아오기

---

 

AppModule에 HttpClient 등록하기

 

 

1. app.module.ts 파일에서 @angular/common/http 패키지로 제공되는 HttpClientModule를 로드

※다른 import 구문 지우지 말 것※

 

 

 

2. Angular HttpClient 프로바이더를 전역 범위에 등록하기 위해 HttpClientModule을 AppModule @NgModule( ) imports 배열에 추가

---

CartService에서 HttpClient 사용하기

 

1. cart.service.ts 파일에서 @angular/common/http 패키지로 제공되는 HttpClient 심볼을 로드

 

 

 

2. HttpClient를 CartService constructor( )에 의존성으로 주입

---

CartService에서 배송가격 받아오기

 

1. cart.service.ts 파일의 clearCart( ) 메서드 아래 getShippingPrices( ) 메서드를 추가하고 이 메서드에 HttpClient get( ) 메서드를 이렇게 구현

shipping.json 파일에 있는 배송 가격 데이터 불러오기

---

배송 컴포넌트 생성하기

 

1. shipping 컴포넌트 생성

 

당연히 명령어로 생성

ng generate component shipping

 

 

 

2. app.module.ts 파일에 배송 컴포넌트로 연결되는 라우팅 규칙 추가

실선 박스 속의 코드는 직접 입력해야 하고 점선 박스 안의 코드는 자동으로 추가

 

 

~동작 확인~

http://localhost:4200/shipping 연결시 아래 화면 확인 가능

안 되면 일단 ng serve --open 해야하나 확인

---

ShippingComponent에서 HTTP 통신을 활용해 shipping.json 파일 속의 데이터 불러오기

 

ShippingComponent에서 CartService 활용하기

 

1. shipping.component.ts 파일에서 CartService 불러오기

 

 

2.  장바구니 서비스를 ShippingComponent constructor( )에 의존성으로 주입

 

 

3. CartService getShippingPirces( ) 메서드로 shippingCosts 프로퍼티 값을 할당

 

 

4. ShippingComponent 템플릿을 수정해 배송 타입과 가격 표시

async 파이프는 스트림으로 전달된 데이터의 마지막 값을 반환하며 이 동작은 컴포넌트가 존재하는 동안 계속 실행됨

Angular가 컴포넌트를 종료하면 async 파이프도 함께 종료됨

 

 

5. CartComponent 화면에서 ShippingComponent 화면으로 이동하는 링크 추가

---

~결과 확인~

Shipping Prices 추가 확인 가능

Shipping Prices 클릭 ▼

배송 가격 확인 가능