[Angular Tutorial 02] The Hero Editor

[Angular Tutorial 02] The Hero Editor

https://angular.io/tutorial/toh-pt1

다음 명령어를 통하여 generate 타입의 heroes 라는 이름의 component 를 생성 합니다.

 ng generate component heroes 

herose component가 생성 되었습니다.

컴포넌트 하위에는 css, html, ts, spec.ts 파일이 포함되어 있습니다.

app/heroes/heroes.component.ts (initial version) 파일의 구조를 살펴 봅시다.

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-heroes',

templateUrl: './heroes.component.html',

styleUrls: ['./heroes.component.css']

})

export class HeroesComponent implements OnInit {

constructor() { }

ngOnInit() {

}

}

반드시 모든 Components 에는 Angular core library를 import 해야 합니다.

Component Class 는 반드시 Annotation 표시를 해 주어야 합니다 ex) @Component.

You always import the Component symbol from the Angular core library and annotate the component class with @Component.

@Component is a decorator function that specifies the Angular metadata for the component.

1. selector— the component's CSS element selector

3. templateUrl— the location of the component's template file.

4. styleUrls— the location of the component's private CSS styles.

heroes.component.ts (hero property) 파일에서 property 를 추가 해 보겠습니다.

export class HeroesComponent implements OnInit {

hero = 'Windstorm';

constructor() { }

ngOnInit() {

}

}

그리고 heroes.component.html 파일을 다음과 같이 수정 합니다.

<p>

{{hero}}

</p>

이제 src/app/app.component.html 에 view 를 추가하여 결과 화면에 출력 시켜 봅시다.

필요 없는 내용은 삭제 하였습니다.

<!--The content below is only a placeholder and can be replaced.-->

<div style="text-align:center">

<h1>{{ title }}</h1>

<app-heroes></app-heroes>

</ul>

여기까지의 화면입니다.

이제 Hero 라는 Class 를 생성 해 보겠습니다.

src/app 하위에 hero.ts 라는 파일을 생성하여 다음과같이 작성 합니다.

export class Hero {

id: number;

name: string;

}

src/app/heroes/heroes.component.ts 파일로 가서 hero Class 를 import 해줍니다.

그리고 HeroesComponent Class 를 다음과같이 수정합니다.

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() {

}

}

hero 의 타입이 변경되었으니 component.html 의 출력 형식도 변경 해 주어야 겠지요?

heroes.component.html (HeroesComponent's template) 파일을 다음과 같이 수정 합니다.

※ 참고 ※

UppeCasePipe

텍스트를 모두 대문자로 변환 합니다.

사용 방법 : {{ value_expression | uppercase }}

<h2>{{hero.name | uppercase}} Details</h2>

<div><span>id: </span>{{hero.id}}</div>

<div><span>name: </span>{{hero.name}}</div>

{{hero.name | uppercase}}의 내용 WINDSTORM 은 대문자로 출력됩니다. 

그리고 양방향 데이터 바인딩을 위하여 다음과같이 component.html 파일을 다시 수정합니다.

src/app/heroes/heroes.component.html (HeroesComponent's template)

<div>

<label>name:

<input [(ngModel)]="hero.name" placeholder="name">

</label>

</div>

[(ngModel)] is Angular's two-way data binding syntax. (양방향 데이터 바인딩 문법입니다.)

하지만 ngModel 을 사용하기 위햇는 FormsModule 을 import 해주어야 합니다.

app.module.ts 파일을 열어 다음과같이 import 해줍니다.

app.module.ts (FormsModule symbol import)

상단에 import 를 해 준 다음에는 NgModule 의 import 부분에 이름을 꼭 넣어주어야 합니다.

그리고 app.module.ts 파일을 살펴보면 CLI를 통해서 생성한 heroes.component 가 자동으로 선언 되어있는것을 볼 수있습니다. 

물론 declarations 에도 선언되어 있습니다. CLI 를 사용할 때 편리한 장점 중 하나입니다.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

import { AppComponent } from './app.component';

import { HeroesComponent } from './heroes/heroes.component';

@NgModule({

declarations: [

AppComponent,

HeroesComponent

],

imports: [

BrowserModule,

FormsModule // FomsModule 추가

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

여기까지의 모습입니다.

You used the CLI to create a second HeroesComponent.

You displayed the HeroesComponent by adding it to the AppComponent shell.

You applied the UppercasePipe to format the name.

You used two-way data binding with the ngModel directive.

You learned about the AppModule.

You imported the FormsModule in the AppModule so that Angular would recognize and apply the ngModel directive.

You learned the importance of declaring components in the AppModule and appreciated that the CLI declared it for you.

CLI 를 이용하여 새로운 HeroesComponent 를 생성 하였습니다.

HeroesComponent 를 AppComponent 에 추가하여 출력 하였습니다.

UppercasePipe 를 이용하여 문자열을 대문자로 바꾸어 출력 해보았습니다.

양방향 데이터 바인딩 ngModel 을 선언 하였습니다.