[Angularjs2] AngularJs2 컴포넌트 구조

AngularJs2 컴포넌트 구조

1. AngularJs2 컴포넌트

- AngularJs2 컴포넌트는 일반 웹 컴포넌트 기반 기술이다

1) 중첩 컴포넌트

- AngularJs2의 컴포넌트는 하나의 독립 적인 프로그램이지만 부모-자식 컴포넌트 구조로 계층 적인 구성을 가진다

2) 컴포넌트 기반 개발

- 컴포넌트를 개발의 중심에 두고 개발하는 것을 의미한다

- 컴포넌트는 명세에 따른 배포, 조립 가능한 독립 구성 단위여야 한다

3) 컴포넌트 내부

- import 영역

- @Component 장식자

- 컴포넌트 클래스 영역

2. import 영역

- 호출 영역에서 Angular 라이브러리 모듈을 호출하거나 사용자 모듈을 호출

1) Angular 라이브러리 모듈 호출

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

- Angular 라이브 모듈을 @를 붙이는데 다른 모듈과 구분하기 위해서다

2) 사용자 모듈 호출

import { LoggerService } from './logger.service';

3. 장식자 영역

- @Component는 컴포넌트 장식자라고 한다

- 컴포넌트 관련 설정정보를 입력

@Component({ selector : 'intro-component', template : '<div>App Hello</div>' style : ['div{ background: blue;}'] }) export class AppHello{ }

1) selector

- 컴포넌트 이름을 정의

- 컴포넌트 이름은 템플릿을 나타낼 떄 사용한다

<intro-component></intro-component>

2) 템플릿 속성

- 템플릿 속성에는 컴포넌트 UI 코드를 정의한다

 a. template : 내부 파일에 HTML 과 템플릿 문법을 이용해서 템플릿정의

 b. templateUrl : 외부 파일에 HTML 과 템플릿 문법을 이용해 정의

4. 컴포넌트 클래스 영역

- 템플릿 데이터 출력과 관련된 로직을 처리