앵귤라 공식사이트에 있는 튜토리얼에 있는 내용을 직접 단계별로 해볼 계획이다.
앵귤라 공식사이트에 튜토리얼 -> https://angular.io/tutorial
튜토리얼은 총 8부분으로 나뉘어져 있다.
- Introduction
- The Application Shell
- The Hero Editor
- Displaying a List
- Master/Detail Components
- Services
- Routing
- HTTP
1섹션은 소개, 2섹션은 애플리케이션 쉘, 3섹션은 영웅 수정, 4섹션은 목록 표시
5섹션은 주/상세 컴포넌트 6섹션은 서비스 7은 라우팅 8은 HTTP관련된 정보로 구분되어졌다.
첫번째 섹션은 만들 애플리케이션의 소개 내용이 담겨져 있다.
부족한 영어실력과 구글 번역기 돌리며 번역한 내용을 정리 해봤다.
튜토리얼은 Tour of Heroes 라는 제목으로 갖고 진행 한다.
이 튜토리얼은 앵귤라의 기본사항을 포함 하고 있다.
직원 채용 대행사 관리하는데 도움이 되는 앱을 튜토리얼 안에서 빌드 할수 있다.
이 기본 앱은 데이터 기반 애플리케이션에서 찾길 기대하는 많은 기능이 있다.
영웅 목록을 만들고 표시하고, 선택된 영웅의 세부사항을 수정하고 다르게 보이는 영웅적인 데이터를 다룹니다.
- 튜토리얼이 끝날 무렵에 다음의 것을을 할수 있을 것이다.
- 내장된 앵귤라 디랙티브들을 사용하여 요소를 보이거나 숨기고 영웅데이터를 목록으로 표시한다.
- 앵귤라 콤포넌트를 만드는것은 영웅의 상세를 표시하고 영웅들의 배열을 표시한다.
- 읽기전용 데이터는 한방햔 데이터 바인딩을 사용합니다.
- 키보드를 누르는 거나 클릭하는거와 같은 사용자 이벤트에 컴포넌트 메소드를 바인드한다.
- 사용자가 주 리스트에서 하나의 영웅을 선택하는것과 상세 보기에서 수정 할수 있다.
- Format data with pipes.
- 영웅들을 모으는 공유 서비스를 만듭니다.
- 다른 뷰들 사이들과 과 그들의 콤포넌트들 사이에서 찾을때 라우팅을 사용합니다.
https://stackblitz.com/angular/ybbpegbnnlq
무엇을 만들지.
대시보드 라는 것으로 시작하고 더 영웅적인 영웅들을 볼수 있고
대시보드 에 두개 링크 ("Dashboard" and "Heroes" 로 구성 하여 화면이동
영웅을 클릭 하면 라우터는 "Hero Details" 을 열어 보여준후 그곳에서 영웅의 이름을 바꿀수 있다.
"Back"버튼을 클릭하는것은 대시보드로 돌아간다.상단위 링크들은 가진다. 메인뷰 중의 하나를. "Heroes"를 클릭하면 그 앱은 "Herose" 주목록이 표시된다
다른 영웅 이름을 클릭했을때, 읽기전용 작은 상세 아래에 그새로 선택된 것이 목록에 비친다.
상세보기 화면에서 선택된 영웅을 수정가능한 상세로 로 주입 한다네요;
만들려고 하는 애플리케이션의 설명을 이미지와 함께 설명하고 있다.
목록, 상세정보, 수정 등을 만든다는 내용인걸로 보인다.