Angular

Angular 튜터리얼 - Hero 에디터

Angular

The Hero Editor

Local 개발환경 설치

설치 안내에 따라 angle-tour-of-heroes라는 새 프로젝트를 만듭니다.

파일 구조는 다음과 같아야합니다.

1
2
3
4
5
6
7
8
9
10
11
12
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

이 페이지를 끝내면 앱은 이 라이브 예제/다운로드 예제처럼 보일 것입니다.

앱 실행과 트랜스파일 유지하기

터미널 창에서 다음 명령을 입력하십시오.

1
npm start

이 명령은 TypeScript 컴파일러를 “watch mode”에서 실행하여 코드가 변경되면 자동으로 다시 컴파일 하도록합니다. 또한 이 명령은 앱이 브라우저에서 동시에 실행되고 코드가 변경되면 브라우저를 새로 고칩니다.

다시 컴파일하거나 새로 고치지 않고 브라우저를 일시 정지하지 않아 Tour of Heroes 앱을 계속 만들 수 있습니다.

Hero 보여주기

AppComponent에 두 개의 프로퍼티를 추가합니다. 앱 이름의 title 프로퍼티와 Windstorm이라는 영웅의 hero 프로퍼티입니다.

app.component.ts (AppComponent class)

1
2
3
4
export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

이제 @Component Decorator 템플릿을 새로운 프로퍼티에 대한 데이터 바인딩으로 업데이트합니다.

app.component.ts (@Component)

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

브라우저가 새로 고침되고 title과 hero 이름이 표시됩니다.

이중 중괄호는 Angular의 Interpolation 바인딩 구문입니다. 이러한 Interpolation 바인딩은 HTML <h1> 태그 안에 Component의 title 및 hero 프로퍼티를 문자열로 표시합니다.

Interpolation 바인딩에 대한 자세한 내용은 데이터 표시하기 페이지를 참조하십시오.

Hero 객체

hero는 더 많은 프로퍼티가 필요합니다. hero를 문자열에서 클래스로 변환합니다.

id 및 name 프로퍼티를 사용하여 Hero 클래스를 만듭니다. app.component.ts 파일의 맨 위에있는 import 문 바로 아래에 이러한 프로퍼티를 추가합니다.

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

1
2
3
4
export class Hero {
  id: number;
  name: string;
}

AppComponent 클래스에서, Component의 hero 프로퍼티가 Hero 타입으로 리팩토링된 다음 id는 1로 name은 Windstorm 으로 초기화합니다.

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

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

hero를 문자열에서 객체로 변경했기 때문에 hero의 name 프로퍼티를 참조하도록 템플릿의 바인딩을 업데이트합니다.

src/app/app.component.ts

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

브라우저가 새로 고쳐지고 Hero의 이름이 계속 표시됩니다.

Multi-line template string으로 HTML 추가하기

Hero의 모든 프로퍼티를 표시하려면 Hero의 id 프로퍼티에 <div>를 추가하고 Hero의 name에 다른 <div>를 추가합니다. 그리고 템플릿을 읽기 좋게 유지하려면 각각의 <div>를 각 라인에 배치합니다.

ES2015와 TypeScript의 템플릿 리터럴 (template literals) 기능 덕분에 Component의 template에 백틱을 사용하면 <h1>, <h2>, <div> 요소를 각 라인에 넣을 수 있습니다. 자세한 내용은 템플릿 리터럴을 참조하십시오.

app.component.ts (AppComponent’s template)

1
2
3
4
5
6
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> 텍스트 상자에서 Hero 이름을 편집할 수 있어야합니다. 텍스트 상자는 Hero의 name 프로퍼티을 표시하고 사용자가 입력할 때 해당 프로퍼티를 업데이트 해야합니다.

<input> form 요소와 hero.name 프로퍼티 사이에는 양방향 데이터 바인딩이 필요합니다.

양방향 바인딩

템플릿에서 Hero 이름을 리팩토링하여 다음과 같이 표시합니다.

src/app/app.component.ts

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

[(ngModel)]은 hero.name 프로퍼티를 텍스트 상자에 바인딩하는 Angular 구문입니다. 데이터는 프로퍼티에서 텍스트 상자로, 텍스트 상자에서 프로퍼티로으로 양 방향으로 흐릅니다.

유감스럽게도 이 변경 직후 응용 프로그램이 중단됩니다. 브라우저 콘솔에서 보면 Angular가 “ngModel … isn’t a known property of input.”라는 메시지을 출력합니다.

NgModel은 유효한 Angular Directive이지만 Default로 사용할 수 없습니다. 선택적 FormsModule에 속합니다. 해당 모듈을 사용하도록 import 해야합니다.

FormsModule 포함(Import) 하기

app.module.ts 파일을 열고 @angular/forms 라이브러리에서 FormsModule 심볼을 import 합니다. 그런 다음 @NgModule 메타 데이터의 import 배열에 FormsModule을 추가합니다. 이 배열에는 앱이 사용하는 외부 모듈 목록이 들어 있습니다.

업데이트된 AppModule은 다음과 같습니다.

app.module.ts (FormsModule import)

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

Forms 가이드의 FormsModule 및 Two-way data binding with ngModel 섹션의 ngModel, 그리고 Template Syntax 가이드의 Two-way binding with NgModel에 대해 자세히 읽어보십시오.

브라우저가 새로 고침되면 앱이 다시 작동합니다. Hero의 이름을 편집하고 텍스트 상자 위의 <h2>에 반영된 변경 사항을 확인할 수 있습니다.

어디까지 왔나?

아래는 여러분이 작업했던 내용입니다.

  • Tour of Heroes 앱의 제목과 Hero 객체의 프로퍼티를 표시하는 이중 중괄호 Interpolation (단방향 데이터 바인딩 유형)을 사용했습니다.
  • ES2015의 템플릿 리터럴을 사용하여 여러줄 템플릿을 작성하여 템플릿을 읽기 쉽게 만들었습니다.
  • 내장 ngModel Directive를 사용하여 <input> 요소에 양방향 데이터 바인딩을 추가했습니다. 이 바인딩은 Hero의 이름을 표시하고 사용자가 변경할 수 있도록합니다.
  • ngModel Directive은 hero.name의 다른 모든 바인딩에 변경 사항을 전파합니다.

앱은 이 라이브 예제/예제 다운로드와 비슷해야합니다.

아래 코드는 완전한 app.component.ts입니다.

src/app/app.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Component } from '@angular/core';
 
export class Hero {
  id: number;
  name: string;
}
 
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

앞으로의 여정

다음 튜토리얼 페이지에서는 Tour of Heroes 앱을 기반으로 Heroes 목록을 표시합니다. 사용자가 Hero를 선택하고 세부 정보를 표시할 수도 있습니다. 목록을 검색하는 방법과 템플릿에 바인딩하는 방법에 대해 자세히 배웁니다.

이 내용은 나중에 참고하기 위해 제가 공부하며 정리한 내용입니다.
의역, 오역, 직역이 있을 수 있음을 알려드립니다.
This post is a translation of this original article [https://angular.io/tutorial/toh-pt1]

참고

공유하기