angular5 Angular 튜토리얼 4 Github 폼(Forms) 데이터 다루기를 끝낸 시점에 온라인 쇼핑몰 앱에는 제품 목록 화면과 장바구니 화면이 존재합니다. 이번에는 폼으로 주문 기능을 추가해서 앱을 완성해 봅시다. 폼은 사용자의 정보를 입력받을 때 사용합니다. Angular가 제공하는 폼 Angular 폼은 HTML이 제공하는 폼을 바탕으로 커스텀 폼 컨트롤을 정의하거나 Angular가 제공하는 유효성 검사 메커니즘을 활용합니다. Angular가 제공하는 폼 기능은 컴포넌트에 존재하는 객체를 기반으로 데이터를 처리하는 반응형 폼(Reactive form)과 템플릿만으로 처리하는 템플릿 기반 폼으로 구분할 수 있습니다. 폼 모델 정의하기 가장 먼저, 주문 정보를 저장할 폼 모델을 정의해야 합니다. 컴포넌트 클래스에 정의하는 폼 모델은 .. 2020. 2. 24. Angular 튜토리얼 3 Github 데이터 다루기 라우팅 문서를 마지막까지 진행하고 나면 온라인 쇼핑몰 앱에는 제품 목록 화면과 제품 상세정보 화면이 존재합니다. 그래서 제품 목록 화면에서 사용자가 제품의 이름을 클릭하면 새로운 화면으로 전환되면서 제품의 상세정보를 확인할 수 있습니다. 이 때 URL도 변경됩니다. 이번 섹션에서는 장바구니 기능을 추가해봅시다. 이렇게 진행합니다: 제품 상세정보 화면에 "Buy" 버튼을 추가합니다. 이 버튼을 클릭하면 현재 화면에 표시된 제품을 장바구니 서비스에 추가합니다. 장바구니 컴포넌트를 추가합니다. 이 컴포넌트는 장바구니에 들어있는 제품 목록을 표시합니다. 배송 비용 안내 컴포넌트를 추가합니다. 이 컴포넌트는 Angular의 HttpClient 모듈을 사용해서 .json 파일에 있는 제품.. 2020. 2. 20. Angular 튜토리얼 2 Github 라우팅(Routing) 첫번째 Angular 앱을 끝낸 시점에 우리가 만든 온라인 쇼핑몰 애플리케이션에는 간단한 제품 목록만 존재합니다. 그래서 아직까지 앱의 상태를 관리하거나 네비게이션하는 기능은 없습니다. 앱이 동작하는 URL은 하나뿐이고, 이 URL에서는 언제나 제품의 목록과 간단한 설명을 표시하는 "My Page" 페이지만 표시됩니다. 이번 섹션에서는 제품에 대한 상세정보를 표시하는 화면을 만들어 봅시다. 이 페이지가 표시되는 URL도 새로 할당할 것입니다. 이렇게 구현하려면 Angular 라우터(router)를 사용하면 됩니다. 라우터를 사용하면 사용자가 접속한 주소에 어울리는 컴포넌트와 데이터를 사용자에게 보여줄 수 있습니다. 라우터는 다음과 같은 경우에 동작합니다 주소표시줄에 U.. 2020. 2. 19. Angular 튜토리얼 1 Github Angular 그냥 시작해보기1 따로 프로젝트를 생성할 필요없에 웹에서 시작해보기 (StackBlitz에 새로운 프로젝트를 생성하려면 여기를 클릭하세요.) StackBlitz에서 생성된 프로젝트 첫 화면 템플릿 문법 Angular 템플릿 문법을 사용하면 HTML과 JavaScript을 확장할 수 있습니다. 이번 섹션에서는 "Products" 영역을 어떻게 확장할 수 있는지 알아봅시다. (템플릿 문법에만 집중하기 위해 아래 예제에서는 product-list.component.ts 파일에 미리 정의된 제품 데이터와 메소드를 사용합니다.) 1. product-list 폴더에 있는 product-list.component.html 템플릿 파일을 엽니다. 2. 제품의 이름을 표시할 수 있도록 템플릿을.. 2020. 2. 18. 이전 1 2 다음
