컴포넌트 구조

Angular2 스터디 발표 자료
컴포넌트 내부는 크게 세영역으로 나누어짐
- import 영역
- @Component 장식자
- 컴포넌트 클래스 영역

1. import 영역

• Angular 라이브러리 모듈은 @를 붙여 호출.
• 사용자 정의 모듈 호출은 상대경로를 통해 호출.

//angular 모듈 호출
import { Component } from '@angular/core';

//사용자 정의 모듈 호출
import { ModuleName } from './module.name';

2. @Component 영역

• @Component는 컴포넌트 장식자라함.

@Component({
  selector : 'ComponentName',
  template : '<div>Component template</div>',
  styles : ['div{background:blue;}']
})
export class HelloApp{}

• selector : 컴포넌트의 이름을 정의 <ComponentName></ComponentName>의 형식으로 사용.
• template : 내부파일에 html과 템플릿 문법을 이용해 템플릿 정의
• templateUrl : 외부 파일에 html과 템플릿 문법을 정의
• P.89-90참조

3. 컴포넌트 클래스 영역

• 템플릿 데이터 출력과 관련된 로직을 처리.
• http 서비스를 이용해 요청 결과를 템플릿에 반영.
• 템플릿의 클릭이벤트를 받아 이벤트 처리.
• 템플릿에 사용할 데이터를 다른 컴포넌트에서 받아 처리.
• 바인딩 변수를 이용해 권한에 따라 템플릿에서 화면 제어.