영웅 수정
애플리케이션은 이제 기본 제목이 있다. 다음으로 영웅정보 표현과 애플리케이션 쉘의 콤포넌트의 배치 할 새로운 콤포넌트를 만든다.
영웅 콤포넌트 만들기
앵귤라 CLI를 이용해서 heroes라는 이름으로 새로운 콤포넌트를 자동생성한다.
ng generate component heroes
ng : 'ng' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.
위치 줄:1 문자:1
+ ng generate component heroes
+ ~~~
+ CategoryInfo : ObjectNotFound: (ng:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
angular/cli 이 설치가 안되었나 해서 angular/cli 설치후 다시실 행 똑 같은 오류 ..
이상하다 싶었다.
ls 명령어 후 다시 컴포넌트 재너레이터 명령 실행하니 5초 정도 걸린후 제너레이터 된 파일이 만들어졌다.
PS D:\workspace\dev\angular02\angular-tour-of-heroes> ng generate component heroes
create src/app/heroes/heroes.component.html (25 bytes)
create src/app/heroes/heroes.component.spec.ts (628 bytes)
create src/app/heroes/heroes.component.ts (269 bytes)
create src/app/heroes/heroes.component.css (0 bytes)
update src/app/app.module.ts (398 bytes)
html과 테스트, ts파일, css 파일이 제너레이터 되어 생성되고, 모듈 파일이 업데이트 되었다.
CLI은 src/app/heroes/ 폴더를 만들고 HeroesComponent의 3개 파일이 자동생성된다.
HeroesComponent 클래스 파일은 다음과 같다.
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() {
}
}
앵귤러 코어 라이브러리를 항상 import 해야된다네요. 그리고 @Component 애노테이션을 함깨 사용한다고 합니다.
@Component는 콤포넌트를 위한 Angular 메터데이터를 명시하는 decorator 이다.
CLI은 3개 메테데이터 속성을 자동생성한다.
- selector - 콤포넌트의 CSS 요소 선택자
- templateUrl - 콤포넌트의 템플릿 파일이 위치
- styleUrls - 콤포넌트마느이 CSS 스타일 위치
CSS 요소 선택자, 'app-heroes', 이컴포넌트가 부모 컴포넌트의 템플릿에서 확인 html 요소의 이름이 같은것을 매치한다.
컴포넌트 생성 후 바로 싱행된는 ngOnInit는 초기화 로직을 넣기에 좋은 곳이다.
AppModule 안에 처럼 다른곳에서 가져올수 있도록 항상 컴포넌트 클래스를 내보낸다.
영웅 속성 추가
영웅이름을 "Windstorm" 으로 HeroesComponent 에 영웅 속성을 추가한다.
heroes.component.ts (hero property)
hero = 'Windstorm';
영웅 보여주기.
heroes.component.html 템플릿 파일을 연다. Angular CLI 가 자동으로 만든 기본 글을 삭제하고 새로운 영웅 속성 데이터 바인을 변경한다.
heroes.component.html
{{hero}}
HeroesComponent view 보여주기
HeroesComponent를 보여주는것은 shell AppComponent의 템플릿을 추가 해야한다.
app-heroes는 HeroesComponent의 요소 선택자를 기억해라. AppComponent 템플릿 파일에 <app-heroes> 요소를 정확히 title 아래 추가한다,
src/app/app.component.html
<h1>{{title}}</h1>
<app-heroes></app-heroes>
ng serve 명령을 이용해서 title 과 영웅 이름을 표시를 확인한다.
영웅 클래스 생성
src/app 폴더 안에 자신의 파일을 id와 name 속성을 줘서 영웅 클래스를 생성한다. .
src/app/hero.ts
export class Hero {
id: number;
name: string;
}
HeroesComponent 클래스로 돌아와서 Hero 클래스를 가져온다.
컴포넌트의 영웅 프로퍼티 는 Hero 타입으로 리팩터한다. 초기화설정은 1의 id 와 Windstorm 이름으로한다.
수정된 HeroesComponent클래스 파일은 다음 과 같다.
src/app/heroes/heroes.component.ts
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() {
}
}
이페이지는 더이상 적절히 표시되지 않는다. 왜냐면 문자열에서 객체로 변경된 영웅 폼 때문이다.
[object Object] 로 표시된다.
영웅 객체 표시
템플릿 안에서 상세 레이아웃 안에서 영웅의 이름과 id 그리고 이름을 보여주는것을 알려주는 바인딩 업데이트 한다.
heroes.component.html (HeroesComponent's template)
<h2>{{ hero.name }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>
브라우저 리프래쉬되고 영웅의 정보를 보여준다.
대문자 파이프 포멧
이처럼 hero.name 바인딩을 수정한다.
<h2>{{ hero.name | uppercase }} Details</h2>
브라우저 리플래시되고 지금 바로 영웅의 이름은 대문자로 표시된다.
대문자를 바인딩을 써넣을때 , 파이프 연산자 | 바로뒤, 내장 UppercasePipe를 동작시킨다
파이프는 문자열 포메팅, 통화 가격, 날짜 와 다른 날짜 표시에 함에 좋은 방법이다.