영웅 수정
사용자는 <input> 텍스트박스 안에 영웅 이름을 수정할 수 있어야 한다.
텍스트박스 영우의 이름이 표시되고 사용자 타입 속성을 업데이트 한다.
즉 데이터의 흐름은 컴포넌트 클래스에서 화면으로 표시되고 화면에서 클래스로 흐름이다.
데이터의 흐름을 자동화 하는것은, 요소의 <input>과 hero.name 속성을 양방향 데이터 바인딩으로 설정 한다.
양방향 바인딩
HeroesComponent 템플릿에 상세소스
src/app/heroes/heroes.component.html (HeroesComponent's template)
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
[(ngModel)]은 앵귤러의 양방향 데이터 바인딩 문법이다.
여기 hero.name 속성은 HTML 텍스트박스에 바인딩 되고 데이터는 양방향으로 흐를수 있다. hero.name 속성 에서 텍스트박스로, 그리고 텍스트 박스는 hero.name 으로 돌아간다.
누락된 FormsModule
(ngModel) 을 추가 하면 앱이 동작하지 않는다.
에러를 보면, 브라우저의 개발툴과 다음과 같은 메세를 콘솔에서 확인한다.
Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.
크롬 에서 확인
Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("<div>
<label>name:
<input [ERROR ->][(ngModel)]="hero.name" placeholder="name">
</label>
</div>"): ng:///AppModule/HeroesComponent.html@2:13
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34366)
ngModel은 유효한 앵귤러 명령 이긴하지만, 기본적으로 사용할수 없다.
선택적 FormsModule 이어서, 사용 할려면 옵션을 넣어야 한다.
AppModule
앵귤라는 반드시 애플리케이션 조각들이 어떻게 서로 잘 맞는지, 무슨 다른 파일들과 앱에서 필요로 하는 라이브러리들을 알아야 합니다. 이 정보를 메타데이터라고 불린다.
메타데이터 중의 일부는 컴포넌트 클래스들을 추가할 @Component 데코레이터이다. 메타데이터의 대단의 중요한 것은 @NgModule 데코레이터에 있다.
제일 중요한 @NgModule 데코레이터 애노테이트는 최상위 AppModule 클래스이다.
프로젝트가 생성될때 AppModule 클래스가 src/app/app.module.ts 코드에 Angular CLI이 자동생성된다.
이것은 FormsModule 에서 옵션을 넣을때.
FormsModule 추가
AppModule(app.module.ts) 열고 @angular/forms 라이브러리에서 FormsModule 심볼을 가져옵니다.
app.module.ts (FormsModule 추가)
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
FormsModule을 추가 할때 @NgModule 메터데이터의 배열을 추가한다. 이 배열에 포함된것은 앱에 필요한것을 확장 모듈 목록 이다.
app.module.ts ( @NgModule imports)
imports: [
BrowserModule,
FormsModule
],
브라우저가 재생될때, 앱이 다시 작동 한다. 영웅의 이름을 수정할수 있고, textbox 위에 <h2> 변화되는 즉각 반응하는 모습을 볼수 있다.
HeroesComponent 선언
모든 컴포넌트는 정확히 하나의 NgModule로 선언되어야 한다.
HeroesComponent를 선언하지 않았습니다. 그렇다면 애플리캐이션이 왜 작동 할까요?
그게 작동한 이유는 Angular CLI이 AppModule에서 HeroesComponent 콤포넌트가 자동생성될때 이를 선언했기 때문이다.
src/app/app.module.ts 파일을 열어서 HeroesComponent 찾아 위부근에 추가한다.
import { HeroesComponent } from './heroes/heroes.component';
The HeroesComponent is declared in the @NgModule.declarations array.
declarations: [
AppComponent,
HeroesComponent
],
애플리케이션 콤포넌트, AppComponent 와 HeroesComponent AppModule 선언한다.
최종 코드 검토
src/app/heroes/heroes.component.ts
src/app/heroes/heroes.component.html
src/app/app.module.ts
src/app/app.component.ts
src/app/app.component.html
src/app/hero.ts
content_copy
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
hero: Hero = {
id: 1,
name: 'Windstorm'
};
constructor() { }
ngOnInit() {
}
}
요약
CLI로 사용하여 두번재 HeroesComponent 생성했다.
HeroesComponent에 AppComponent로 추가하여 표시했다.
UppercasePipe 적용하여 이름 서식을 지정 했다.
양방향 데이터 바인딩은 ngModel 디렉티브를 이용했다.
AppModule에 대해서 배웠다.
AppModule에서 FormsModule을 추가 하면 앵귤라는 그것을 알아채고 ngModel 디렉티브를 지원한다.
AppModule에서 컴포넌트선언의 중요성을 배웠고 당신을 위한 CLI 선언 진가를 알아봤다.