Angular 튜토리얼(Tour of Heroes) 해봤다 - The Hero Editor

전 7장 세워져 있다 Angular 튜토리얼

다른 장도 해보았습니다
3. Master/Detail

QuickStart

설정은 매우 간단했고 agunalrCLI로 설정할 수있었습니다. 단 3단계로 손쉽게 프로젝트 작성
자세한 내용은 여기

npm 명령을 사용할 수 없으면 설치가 필요합니다.
- Mac에 node.js를 설치하는 단계.
- Node.js/npm 설치(for Windows)

프로젝트 구성

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. introduction

튜토리얼로 어떤 것을 만들어 가는지 등등 설명

2. The Hero Editor

배운 내용

데이터 바인딩은 무엇입니까?

하나의 JS 파일에 정의 된 변수를 html로 참조로 변경할 수 있습니다.

1. 데이터 바인딩은 어떤 것입니까?

app.component.ts전체상

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'
  };
}

변수를 html로 참조란?

app.component.ts 발췌

export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.ts 발췌

template: `<h1>{{title}}</h1>`

이 경우 변수의 title, hero가 출력되어 이런 느낌의 표시가 된다

<h1>Tour of Heroes</h1>

변수를 html로 참조와 변경이란?

사용자가 입력한 변경사항과 동기화하여 내용 변경

app.component.ts 발췌

export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.ts 발췌

template: `
  <h1>{{title}}</h1>
<input [(ngModel)]="title">  `

거동은 아래의 느낌입니다. 입력에서 입력한 내용이 h1 태그 내에서 즉시 반영됩니다.