[Docs번역-Tutorial]#1.Introduction

이 튜토리얼에서는 영웅들의 인력관리를 위한 앱을 만들 것이다. 

이 앱은 Angular의 핵심 기반들을 다룰 것이다. 우리는 data-driven app에 기대하는 다양한 특징들을 가진 앱을 만들것이다. ( 영웅들의 리스트를 얻고 보여주며, 선택된 영웅들의 세부내역을 편집하고, 영웅들의 데이터를 다양한 관점에서 보여줄 수 있는 )

우리는 영웅들의 데이터를 보여주고, element들을 보여주고 숨기기 위해 build-in directive(지시자)를 사용할 것이다. 우리는 영웅들의 상세 내용과 영웅들을 배열로 보여주기 위해 component 들을 만들 것이다. 우리는 read-only 데이터를 위해 one-way data binding을 사용할 것이다. 우리는 편집가능한 필드를 위해 2-way databinding도 사용할 것이다. 우리는 키보드입력이나 마우스클릭과 같은 사용자 이벤트를 component methods에 바인딩 할 것이다. 우리는 사용자가 master list에서 영웅을 선택하고 details view에서 영웅들을 편집할 수 있도록 제공할 것이다. 우리는 pipes와 함께 data 서식을 지정할 것이다. 우리는 영웅들을 모으기 위해 shared service를 만들 것이다. 마지막으로, 다른 view나 component로 navigate하기 위해 라우팅을 사용할 것이다.

 우리는 Angular를 시작하기 위한 충분한 지식을 습득 할 수 있을 것이며, Angular를 이용해 뭐든지 만들 수 있을 것이라는 자신감을 얻게 될 것이다. 우리는 처음시작치고 많은 지식을 얻게 될 것이며, 더욱 더 자세한 건 많은 공부를 필요로 할 것이다.

우리가 만들어 볼 것

---

해당 앱의 시작화면인 "Dashboard"이다.

 우리는 두가지 view를 확인하기 위해 두가지 링크 ( dashboard, heroes ) 를 클릭할 수 있다.

만약 "magneta" 영웅을 클릭한다면, 라우터는 영웅의 이름을 편집할 수 있는 "Hero Detail" 뷰를 열어준다.

"Back" 버튼을 누르면 DashBoard로 다시 돌아간다. "Heroes"를 클릭하면 앱은 master list view를 보여준다.

 만약 다른 영웅의 이름을 클릭한다면, read-only용 상세내역이 리스트 밑에 나온다.

 우리는 "View Details를 누르면 선택된 영웅을 편집할 수 있는 화면으로 넘어간다.

 밑에 그림이 전체 흐름도이다.