[Docs번역-Tutorial]#2.The Hero Editor(양방향 바인딩)

개발 환경 로컬에 구성하기

---

 angular-tour-of-heroes  프로젝트를 만들기 위해 해당 링크(https://angular.io/guide/setup)를 따라하자. 

angular-tour-of-heroes

src

app

app.component.ts

app.module.ts

main.ts

index.html

styles.css

systemjs.config.js

tsconfig.json

node_modules ...

package.json

우리가 이 모든것을 완성하고 나면 다음과 같은 화면(https://embed.plnkr.co/?show=preview)을 볼 수 있다.

앱을 compile하고 실행하자.

---

터미널에 다음과 같은 명령어를 입력하자.

npm start

이 커맨드는 TypeScript 컴파일러가 "watch mode"에서 실행되고, 코드가 변경되었을 때 자동적으로 recompile를 해준다. 동시에 브라우저에 app을 실행해주고 코드가 변경되었을 때 새로고침을 해준다.

해당 앱을 개발할 때 브라우저를 새로고침하거나 재 빌드해야 하는 불편한 일은 없을 것이다.

영웅을 보여주자.

AppComponent에 두가지 속성을 추가해주자. : app 이름을 나타내는 title 과 hero 이름을 나타내는 hero

app.component.ts (AppComponent class)

export class AppComponent { title = 'Tour of Heroes'; hero = 'Windstorm'; 

}

이제 새로운 속성을 데이터 바인딩하며 @Component 데코레이터를 템플릿에 업데이트 하자.

app.component.ts (@Component)

template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`

브라우저는 제목과 영웅 이름을 보여준다.

{{}} 표기법은 Angular의 binding syntax이다. 이 바인딩은 component의 title과 hero property를 HTML header 태그에 보여준다/.

Hero object

---

hero object는 더 많은 property들을 필요로 한다. hero를 string에서 class로 변환해주자.

id와 name을 가지는 Hero class를 만들어보자. app.component.ts 파일의 최상단에 만들자.

src/app/app.component.ts (Hero class)

export class Hero {

id: number; name: string; }

AppComponent 클래스 안에, 리팩토링을 해주자.

src/app/app.component.ts (hero property)

hero: Hero = { id: 1, name: 'Windstorm' };

src/app/app.component.ts

template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`

브라우저는 자동으로 새로고침이 되어 hero의 이름을 보여준다.

multi-line template string을 HTML에 추가하기

---

hero의 속성들을 모두 보여주기 위해서는, id를 보여주기 위한 <div>와 name을 보여주기 위한 <div>를 추가하자. 가독성을 위해 다른 라인에 입력해주자.

Template literals(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) 덕에 다음과 같이 코드를 작성할 수 있다. 자세한건 해당 링크를 통해 알아보자.

app.component.ts (AppComponent's template)

template: `

<h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> `

hero name 편집하기

---

 사용자는 당연히 <input> textbox를 통해 영웅의 이름을 편집할 수 있어야 한다. textbox는 name을 보여주고, property를 update도 해줘야 한다.

 

 우리는 이를 위해서는 <input>과 hero.name property를 2-way binding 해주어야 한다.

two-way binding ( 양방향 바인딩 )

---

 template의 hero name은 다음과 같이 리팩토링 된다.

src/app/app.component.ts

<div>

<label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div>

 [(ngModel)] 은 textbox에 hero.name property를 바인딩하기 위한 Angular syntax이다. 데이터는 양방향으로 간다. : property에서 textbox로, textbox에서 property로 

 아쉽게도 해당 수정이후 application은 깨진다. browser 콘솔을 보면, 우리는 아마 "ngModel... isn`t a known property of input" 이라는 것을 볼 수 있을 것이다.

 비록 ngModel은 Angular directive가 맞지만, 기본으로 가능한 directive는 아니다. FormsModule 라는 걸 사용해야 한다.

FormsModule 가져오기

---

 app.module.ts 파일을 열고 FormsModule을 @angular/forms 라이브러리에서 가져오자. 앱이 사용하는 외부 모듈들을 나타내는 @NgModule metadata의 imports 배열에 FormsModule을 추가해주자.

수정된 AppModule은 다음과 같다.

app.module.ts (FormsModule import)

1. import { NgModule } from '@angular/core';
2. import { BrowserModule } from '@angular/platform-browser';
3. import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
4.  
5. import { AppComponent } from './app.component';
6.  
7. @NgModule({
8. imports: [
9. BrowserModule,
10. FormsModule // <-- import the FormsModule before binding with [(ngModel)]
11. ],
12. declarations: [
13. AppComponent
14. ],
15. bootstrap: [ AppComponent ]
16. })
17. export class AppModule { }

( FormsModule과 ngModel과 관련된 내용은 FUNDAMENTALS 번역에 올리도록 하겠습니다. )

 

 브라우저가 새로고침되면서, app은 다시 동작한다. 우리는 이제 영웅의 이름을 편집하고, 편집된 내용이 <h2>에 반영되는 것을 확인할 수 있습니다.