Building an SPA with Angular - The next level[2]

add review 페이지를 만들고 

데이터를 제출하는 방법부터 배웁니다.

 

폼 이동 대신 페이지에 폼을 인라인으로 표시합니다.

 

입력 필드에 "데이터 바인딩"

 

Express에서 만든 html을 가져와 씁시다.

 

 

 

앵귤러에서는 페이지를 변경하지 않고 데이터를 바인딩시켜줘야 합니다.

 

 

[()] ="bingdingName" 데이터를 넣을 수 있습니다.

 

 

HTML에서 ngModel을 사용하려면

FormsModule 및 REactiveFormsModuel을 app.module.ts로 추가해야 합니다.

 

 

newReview로 묶어서 api에 보냅시다.

각 속성은 아직 받아오기 전이니 디폴드 값으로 지정해 줍시다.

 

컴포넌트에 정의되어 있으니 html에서도 사용할 수 있습니다.

ngModel로 데이터 바인딩을 시킵니다.

 

select에서는 string으로 들어가게 됩니다. 우리는 숫자를 원합니다.

 

우리는 int형이 필요합니다.

옵션 테그 안에서 [ngValue]="5"로 집어넣어 줍시다.

 

 

Add review를 클릭하면 나타나게 만듭시다.

*ngif를 써서 true이면 폼을 나타나게 합시다.

 

폼테그가 될지 안될지를 변수에 담아야 합니다.

 

 

 

이제 버튼을 클릭하면 true로 만들어야 합니다.

click handler를 설정해야 합니다.

 

 

 

 

 

 

 

이제 api(데이터서버스) 에다가 보냅니다.

 

첫 번째로 데이터 서비스를 업데이트합니다.

posting 하는 메서드가 필요합니다.

addReviewByLocationId를 id와 data를 받아들여서 DB에 저장하게 끔 합니다.

 

 

http 메서드로 폼을 처리했습니다.

onsumit과 같은 것을 해야 합니다.

 

앵귤러는 새로운 페이지로 이동하는 것을 원하지 않습니다.

 

action 속성이 필요 없게 되고

ngSubmit으로 form을 처리합니다.

 

onReviewSubmit() 만들기

 

 

DB 저장하기 전 유효성 검사를 해야 합니다.

 

 

 

onReviewSubmit에 먼저 유효성 검사를 하고 어떤 것이 실행이 되게끔 만듭시다.

 

폼에다가도 넣습니다.

 

 

이제 api에 진짜로 데이터를 넘깁시다.

생성자를 통해 주입을 시켜줍니다.

이제 이 컴포넌트에서 데이터 서비스를 사용할 수 있습니다.

 

 

리뷰도 업데이트하고 form도 감추는 법

 

가장 최근 리뷰가 먼저 표시되도록 unshift를 사용합니다.

 

 

 

 

 

앵귤러를 중간에 처리를 둡니다.

 

컴포넌드가 데이터에 접근할 수 있도록 데이터 바인딩합니다.

앵귤러의 모든 것은 브라우저에 컴파일돼서 다운로드가 됩니다.

 

데이터 값을 가져와서 db에 집어넣으면 됩니다.

 

 

라우팅 설정을 분리합시다

 

 

 

라우팅 모듈을 만들려면 5가지가 필요합니다.

 

app.modul.ts의 파일의 삭제해줘도 됩니다.

 

Location 클래스는 전체 파일로 분리시키는 게 좋겠습니다.

 

하지만 에러가 나옵니다.

Location 클래스 정의가 homelist에 정의되어 있었습니다.

location을 필요로 하는 컴포넌트를 수정해줘야 합니다.

이참에 서브 디렉터리인 OpeingTimes와 클래스 Reveiw도 함께 정의해 줍니다.

이미 쓰던 컴포넌트에 import 해줍니다.

 

location-details컴포넌트에서 review 타입을 바꿔줍시다.

리뷰 형태로 전달이 됩니다.

 

 

이제 앵귤러 api로 만듭시다.

 

 

 

 

제품용으로 build 할 수가 있습니다.

그러면 js로 컴파일된 것을 볼 수 있습니다.

 

이제 프런트 엔트로 작동할 수 있도록 해야 합니다.

express로 요청이 들어오면 

angular의 build폴더로 보내줘야 합니다.

 

build 폴더에 갈 수 있도록 build도 설정해 줍니다.