Angular2 - 데이터 출력하기

우리는 Angular 컴포넌트의 프로퍼티들을 HTML template에 표현하기 데이터를 바인딩할 수 있다.

이 예제를 따라하기 위해서는 먼저 quick-start를 설치해야 한다. angular 공식 사이트를 방문하여 quick-start를 먼저 설치하기를 바란다. 

히어로 리스트들을 출력하는 페이지를 만들어 볼 것이다. 최종 UI는 다음과 같다.

보여지는 컴포넌트에 프로퍼티 삽입하기

컴포넌트 프로퍼티를 출력하기 위한 가장 쉬운 방법은 삽입을 이용해서 프로퍼티 이름을 주입하는 방법이다. 삽입을 위해 view 템플릿에 프로퍼티 이름을 명시하자. {{myHero}}

app.component.ts 파일을 아래와 같이 변경해보자.

1. import { Component } from '@angular/core';
3. @Component({
4. selector: 'my-app',
5. template: `
6. <h1>{{title}}</h1>
7. <h2>My favorite hero is: {{myHero}}</h2>
8. `
9. })
10. export class AppComponent {
11. title = 'Tour of Heroes';
12. myHero = 'Windstorm';
13. }

app.component.ts 파일을 아래와 같이 변경해보자.

컴포넌트에 2개의 프로퍼티를 추가하였으며, 템플릿을 변경하여 컴포넌트 프로퍼티를 출력하였다.

ECMAScript 2015에서 `은 멀티 라인 string을 의미한다. `과 '은 같지 않다.

Angular는 자동으로 title과 myHero같이 채워준다. 앱을 실행하면 다음과 같은 결과를 확인할 수 있다.

인라인 템플릿 vs 템플릿 파일

우리는 컴포넌트의 템플릿을 저장할 수 있는 방법이 두가지가 있다. 첫번째는 template 프로퍼티에 작성하는 것이고 @Component 데코레이터의 templateUrl 프로퍼티에 HTML파일의 주소를 명시하는 것이다. 

선택은 취향에 맡긴다.  여기서는 HTML이 간단하므로 인라인 템플릿을 사용한다.

Constructor vs Variable initialization

여기서는 변수 초기화를 통해 변수에 값을 할당하지만 생성자를 통해서 할당을 할 수도 있다.

export class AppCtorComponent {
  title: string;
  myHero: string;

  constructor() {
    this.title = 'Tour of Heroes';
    this.myHero = 'Windstorm';
  }
}

*ngFor와 함께 배열 프로퍼티 출력하기 

hero 리스트를 출력하기 위해 다음과 같이 heroes 배열로 생성하고 첫번째 값을 myHero에 지정하자.

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0];
}

이제 ngFor 지시자를 사용하여 히어로 리스트를 출력해보자.

  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    <p>Heroes:</p>
    <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
  `

UI는 ul과 li 태그와 함께 HTML 리스트를 출력한다. *ngFor는 li 엘리먼트에서는 반복 지시자이다. 자세한 template syntax에 대한 내용은 공식 홈페이지를 참조하자.

앱을 실행하면 다음과 같은 결과를 확인할 수 있다.

데이터를 위한 클래스 만들기

앱의 코드를 보면 컴포넌트 내부에 데이터를 직접 정의하고 있다. 이건 좋은 방법이 아니다. 

실제 어플리케이션에서는 대부분의 바인딩은 특정한 오브젝트와 함께 발생한다.

특정한 객체를 사용한 바인딩으로 변경하기 위해 hero 이름의 배열을 Hero 객체의 배열로 변경하자. 그러기 위해선 Hero 클래스가 필요하다. hero.ts라는 파일을 작성하고 다음과 같은 코드를 입력하자.

export class Hero {
  constructor(
    public id: number,
    public name: string) { }
}

생성자는 id 와 name이라는 인자를 가지도록 정의하였다. 이것은 마치 프로퍼티를 가진 클래스처럼 보이진 않는다. 그러나 TypeScript에서 간략한 표현으로 생성자의 파라미터들이 정의된다.

public id: number,

간단히 첫번째 파라미터를 설명하자면

• 첫번째 파라미터와 타입을 생성자에 정의

• 같은 이름의 퍼블릭 프로퍼티를 정의

• 클래스의 객체가 생성될때 파라미터에 일치하는 프로퍼티가 초기화된다.

Hero 클래스 사용하기

heroes 프로퍼티에 Hero를 사용해보자.

heroes = [
  new Hero(1, 'Windstorm'),
  new Hero(13, 'Bombasto'),
  new Hero(15, 'Magneta'),
  new Hero(20, 'Tornado')
];
myHero = this.heroes[0];

그런 다음 템플릿을 업데이트 하자. 결과는 똑같지만 코드가 더 명백해졌다.

template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero.name}}</h2>
  <p>Heroes:</p>
  <ul>
    <li *ngFor="let hero of heroes">
      {{ hero.name }}
    </li>
  </ul>
`

NgIf와 함께 조건에 따른 출력하기 

때때로 앱은 상황에 따른 view를 출력해야 할 경우가 있다.

다음은 3개 이상의 히어로가 존재할때 메시지를 출력하는 예제이다.

<p *ngIf="heroes.length > 3">There are many heroes!</p>

자세한 syntax는 공식 사이트를 참조하자.

아래의 실습 최종 소스의 내용이다.

1. import { Component } from '@angular/core';
3. import { Hero } from './hero';
5. @Component({
6. selector: 'my-app',
7. template: `
8. <h1>{{title}}</h1>
9. <h2>My favorite hero is: {{myHero.name}}</h2>
10. <p>Heroes:</p>
11. <ul>
12. <li *ngFor="let hero of heroes">
13. {{ hero.name }}
14. </li>
15. </ul>
16. <p *ngIf="heroes.length > 3">There are many heroes!</p>
17. `
18. })
19. export class AppComponent {
20. title = 'Tour of Heroes';
21. heroes = [
22. new Hero(1, 'Windstorm'),
23. new Hero(13, 'Bombasto'),
24. new Hero(15, 'Magneta'),
25. new Hero(20, 'Tornado')
26. ];
27. myHero = this.heroes[0];
28. }

출처 : https://angular.io/docs/ts/latest/guide/displaying-data.html