Angular로 개발하기 - 5
데코레이터 ( 이건 이전에 것 보충 )
export class simpleComponent { }
컴포넌트는 하나의 클래스다 위 처럼 simpleComponent라는 클래스가 있다고 가정해보자.
이 클래스는 아직까지는 순수한 타입스크립트 클래스이다. 여기서 순수하다라는 표현은 아직까지는 컴포넌트가 아니라는 뜻이다.
즉 컴포넌트로 사용하기 위해서는 앵귤러에게 컴포넌트임을 알려주어야한다.
여기서 사용하는 것이 Component 데코레이터이다. 데코레이터가 대상을 장식한다는 의미를 가진 것처럼 컴포넌트데코레이터는 앵귤러가 평범한 타입스크립트 클래스를 컴포넌트로 인지할 수 있도록 하는 역할을 한다.
import { Component } from '@angular/core'
먼저 @angular/core라는 패키지를 임포트해야한다. 왜냐하면 컴포넌트 데코레이터는 위 패키지에서 제공하고 있기 때문이다.
import { Component } from '@angular/core'
@Component({
selector: 'af-simple',
template: `<h1>Angular is not simple</h1>`
})
export class SimpleComponent { }
구조지시자
구조 지시자는 DOM요소를 추가하거나 삭제하는 등 DOM 트리를 동적으로 조작하여 화면의 구조를 변경할 때 사용하는 지시자이다. 앵귤러에서는 기본적으로 NgIf
, NgFor
, NgSwitch
를 제공한다.
NgIf
<div>
<button type="button" (click)="isShow = !isShow">전환</button>
<label *ngIf="isShow; else hiding">true</label>
<ng-template #hiding>
<label>false</label>
</ng-template>
</div>
ngIf
는 말그대로 if문인 것 같다. isShow
라는 변수가 클릭당할때마다 불리언값이 바뀌는데 그 값이 참일 경우에는 label 요소가 뷰에 활성화되고 거짓일 경우에는 해당 label
요소가 dom트리에서 제거되고 else
뒤에 hiding이 가리키는 템플릿 참조 변수의 요소가 DOM
으로 삽입된다.
NgFor
app.component.html
<ul>
<li *ngFor="let animal of animals; let idx = index">{{ idx + 1 }} {{animal}}
</li>
</ul>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
idx = 1;
animals = ['lion','tiger','eagle','dog'];
}
ngFor
도 우리가 흔히쓰는 for
문과 같은 기능을 한다. 쓰는 방식이 거의 파이썬 문법과 흡사한 것 같다. *ngFor="let animal of animals; let idx = index"
.ts파일에 있는 변수들을 .html파일의 태그안에서 for문으로 사용한다.
NgSwitch
<span [ngSwitch]="animal">
<span *ngSwichCase="'Dog'">멍멍</span>
<span *ngSwichCase="'lion'">어흥</span>
<span *ngSwichCase="'tiger'">쿠앙</span>
<span *ngSwichCase="'eagle'">난다</span>
<span *ngSwichDefault>none</span>
</span>
NgSwitch
는 첫번째 줄과 같이 먼저 [ngSwitch]에 바인딩할 속성을 선언한다 그리고 해당하는 자식요소의 속성에는 ngSwichCase
에 각 케이스별 값을 바인딩을하고 아무런 값에도 매칭되지 않을 경우에는 ngSwitchDefault
속성을 사용한다.
'Front_End > Angular' 카테고리의 다른 글
04. Angular로 개발하기 - 2 - 서비스/의존성주입 (0) | 2017.07.29 |
---|---|
03. Angular로 개발하기 - 1 - src/app, Component, Data Binding (0) | 2017.07.28 |
02. Angular 시작하기 (0) | 2017.07.08 |
01. Angular 준비하기 (0) | 2017.07.07 |
00. Angular의 개념/구조 (0) | 2017.07.03 |