1. Data Binding 맛보기

시작하기 전에 npm start를 띄어놓고 시작합니다. Anguar 2 시작하기에서 봤듯이 저렇게 해놓으면 TypeScript 코드가 변경되면 자동으로 re-compile해서 화면에 뿌려줍니다.

그러면 코딩을 시작해봅시다.

1. 우선 app.component.ts 를 아래와 같이 수정합니다.

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
})
export class AppComponent {
    title = 'Tour of Heroes';
    hero = 'windstorm';
}

     . 클래스에 title과 hero 변수를 선언하고 값을 할당합니다.

     . template을 변경해줍니다. 클래스에 선언했던 변수들을 중괄호 두겹({{}})으로 묶어주시면 됩니다.

     . 화면을 보고 계신가요? 변수가 그대로 화면에 나타나는 것을 볼 수 있습니다. 이렇게 변수를 선언하고 화면의 {{}}에 뿌려지는 것을 data binding이라고 합니다.

2. app.component.ts 를 다시 아래와 같이 수정합니다.

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})
export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
        id: 1,
        name: 'windstorm'
    };
}

export class Hero {
    id: number;
    name: string;
}

     . 클래스 Hero를 하나 더 추가 했습니다. 클래스는 number인 id와 string인 name이 있습니다. TypeScript에서는 이렇게 "변수명: 타입명;" 과 같이 선언을 합니다. TypeScript에서는 JavaScript에서 관리하지 않는 Type을 관리합니다.

     . AppComponent 클래스에서 hero의 타입을 Hero 클래스 타입으로 변경합니다. 그리고 JavaScript 오브젝트 형식으로 값을 할당합니다.

     . template에서는 {{Object명.변수명}}을 통해 data binding이 가능합니다.

3. 만약 Component 내에 template을 여러줄로 작성하실 경우는 '(콜론 옆에) 대신 `(숫자1옆에)로 감싸주면 됩니다.

template:`
      <h1>{{title}}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input value="{{hero.name}}" placeholder="name">
      </div>
      `

     . 지금 화면에서 name 값을 수정해봅시다. 그러면 h2의 {{hero.name}}은 바뀌지 않습니다.

     . 위와 같이 {{}}로 감싸는 것을 one-way binding이라고 합니다. 클래스의 변수가 변경되면 화면에 반영 되지만, 반대로 화면에 값을 수정한다고 해서 그게 클래스의 값이 바뀌는건 아닙니다.

4. Two-way binding을 위해 아래와 같이 template을 수정해봅시다.

template:`
      <h1>{{title}}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div> 
        <label>name: </label>
        <input placeholder="name" [(ngModel)]="hero.name">
      </div>
      `

     . 지금 화면에서 name을 수정하면 h2 태그의 값도 자동으로 변경됩니다.

     . [(ngModel)]="변수명" 으로 할 경우 two-way binding이 됩니다. 이 경우 화면의 값을 바꾸면 그 즉시 클래스의 값도 변경됩니다. 따라서 값이 바뀌었기 때문에 one-way binding 된 {{hero.name}}도 바뀌게 됩니다.

여기까지 간단하게 Data Binding에 대해서 알아봤습니다. 설명은 공식 홈페이지에 가시면 더욱더 잘되어 있습니다.

오늘 포스팅은 너무 간단했네요. 원래는 Spring 쪽을 하려다가 예상외로 시간이 많이 걸려서 간단하게 Angular 2 쪽으로 하나 포스팅 했습니다. 1일 1포스팅. 

출처

Angular 2 공식홈페이지 - tutorial - 2. The Hero Editor : https://angular.io/docs/ts/latest/tutorial/toh-pt1.html