Angular Angular> 유효성 검사 2022. 3. 6. Angular는 기본으로 제공하는 유효성 검사가 있다. https://angular.io/api/forms/Validators Angular angular.io 유효성 검사 추가 특징 Define custom validators Cross field validation Asynchronous validators https://angular.io/guide/form-validation Angular angular.io 요구사항 빈자리가 있으면 안되고 이메일 규칙을 따라야 하고 신용카드 번호는 숫자만 16개 CVC는 숫자만 3개 개발 순서 1. form controls에 관한 유효성 검사 규칙을 구체화한다. 2. form control에 접근하는 Getter method를 구체화한다 3. 에러메시지를 보여주.. Angular> 결제화면 3 2022. 3. 1. Country and State Frontend 1. Country와 State의 클래스를 만든다. 2. 서비스에 Countries와 States 관련 메서드를 추가한다. 3. 서비스로부터 country 데이터를 얻을 수 있게 checkout component 수정 4. country 관련 드랍다운 리스트를 HTML에 추가 5. checkout component에 이벤트 핸들러 추가 6. state 관련 드랍다운 리스트를 HTML에 추가 1. ng generate common/Country ng generate common/State 2. baseUrl 과 constructor에 HttpClient 추가 RestAPI에서 _embedded 내용을 가져오기 위해 인터페이스를 만든다. 3. 4. 5. 값이 .. Angular> 결제 화면2 2022. 3. 1. Year and month 순서 1. 서비스 생성 2. 년도와 월에 대한 서비스 메서드 추가 3. 서비스로부터 년도, 월 정보 데이터를 갖고오는 컴포넌스 업데이트 4. HTML에 드랍다운 리스트 생성 1. ng generate service services/SeolForm 서비스 생성 2. rxjs: Reactive JavaScript rxjs 에 있는 of는 object를 Observable로 바꾼다. Angular - The RxJS library Angular angular.io 3. 배열 변수 만들고 서비스를 constructor에 주입한다. 현재 몇 월, 년도인지 가져와서 서비스 메서드에 주입한다. 신용카드 월, 년도 데이터를 서비스에서 가져와 만들어 놓은 변수에 넣는다. 4. 루프를 통해서 배.. Angular> 결제 화면 2022. 2. 23. 앵귤러는 두 가지 폼이 있다 Reactive forms, Template-driven forms Reactive forms를 사용 할건데 좀 더 자세한 설명은 공식문서에서 보자. Angular - Introduction to forms in Angular Angular angular.io Form Control와 Form Group 개념이 있다. 전자는 유효상태와 가치를 추적하는 개별적인 control 이고 후자는 control의 모음이며 nested group을 생성할 수 있다. 순서 1. checkout component를 생성한다. 2. checkout component를 위한 route를 생성한다. 3. checkout component의 링크와 버튼을 만든다. 4. reactive form을 위.. Angular> 장바구니 목록 수량 조절 2022. 2. 16. 순서 1. CartDetailComponent 생성 2. CartDetailsComponent 라우트 생성 3. 쇼핑카트 아이콘에 링크 추가 4. 카트 아이템을 얻기위해 CartDetailsComponent 수정 5. CartDetailsComponent HTML 추가 1. ng generate component components/cart-details 2. app.module.ts에 CartDetailsComponent에 해당하는 route 추가 복습. routeLink로 접근하면 해당하는 route의 CartDetailsComponent가 route outlet에 페이지 출력 3. 카트 아이콘에 routeLink를 달아준다. 4. cartServcie에서 데이터를 얻어서 CartDetailsComp.. Angular> 장바구니 추가 버튼 2022. 2. 12. 순서 1. 카트 상태 컴포넌트 : 메인페이지, 총 금액, 갯수 2. 카트 상세 페이지 : 카트에 있는 아이템 리스트 3. 카트 상세 페이지 : 아이템 추가 제거 4. 체크아웃 버튼 5. 체크아웃 폼 장바구니 추가 버튼 만들기 1. Create new component : CartStatusComponent ng generate component components/cart-status 2. CartStatusComponent를 위한 HTML template 추가 app.component.html에 새로 만든 cart-status.component 태그 app-cart-status를 넣는다. 3. 카트 넣기 버튼 추가 addToCart 메서드를 넣었는데 이걸 만들어주자. 4. ProductListCompo.. Angular> 페이지 기능 2022. 2. 6. Spring Data REST는 pagination 기능을 지원한다. 사이즈가 10이 되는 페이지의 첫 페이지를 요청하고 싶으면 localhost:8080/api/products?page=0&size=10 localhost:8080/api/products?page=1&size=15 이런 식으로 요청한다. Spring Data REST Reference Guide Spring Data REST Reference Guide Spring Data REST presents a default view of the domain model you export. However, sometimes, you may need to alter the view of that model for various reasons. Th.. Angular> 상품 상세 페이지 2022. 2. 4. 순서 1. 상품 페이지 컴포넌트 생성 2. 상품 페이지를 위한 Angular route 생성 3. HTML페이지에 router link 추가 4. Product Service에서 product를 가저올 수 있는 ProductDetailsComponent 5. Spring Boot app에 요청할 URL을 부르는 Product Service 6. 상품 정보를 보여줄 ProductDetailsComponent를 위한 HTML 수정 상품 정보를 볼 수 있게 Spring Boot 를 설정 수정이나 메서드를 만들어야 할 것 같지만 REST API 기본 기능으로 안해도 됨. 1. component 생성 2. app.module.ts route 생성. ProductDetailsComponent로 등록. 3. rout.. 이전 1 2 3 4 다음
