[AngularJs2] AngularJs2의 구성요소 - component of AngularJs2

AngularJs2의 구성요소 - component of AngularJs2  

1. 정의

- 구성 요소는 크게 4가지 이다

- 컴포넌트, 모듈, 서비스, 지시자

2. 컴포넌트

- 가장 핵심이 된다

- 지시자 + 템플릿 + 클래스로 구성되어있다

import {Component} from '@angular/core'; @Component({ selector:'my-component', template: '{{msg}}' }) exprot class MyComponent{ msg: string = "hello"; ... }

- @Component : 콤포넌트를 정의 할떄 장식자를 사용

- selector : 컴포넌트의 지시자가 위치

- template : 템플릿 UI가 위치

- class : 컴포넌트에서 사용할 로직 위치

- 템플릿과 클래스는 바인딩을 통해 값을 주고 받는다

<my-component></my-component>라고 선언된 위치에서 템플릿 출력으로 hello가 들어감

3. 모듈

- AngularJs는 많은 모듈로 구성된 모듈 집합

- 내장 모듈과 사용자 정의 모듈로 나뉜다

1) 모듈 정의 방법

export class Hello{}  

- export : export 키워드를 이용해 모듈을 정의하고 모듈울 외부로 노출시킨다

2) 정의한 모듈 컴포넌트에 임포트

import { Hello} from './hello';  

3) 모듈의 체계적인 구성 방법

- 클래스 선언위에 장식자를 추가 함으로써 체계적으로 구성된다

- 장식자 모듈 : 컴포넌트, 지시자, 파이프

- Angular 모듈 시스템 : 컴포넌트를 기반으로 모듈을 구성하면 복잡하기 때문에 통합적인 관리 시스템이 필요하고 이런 관리를 모듈 시스템에서 한다

4) 모듈의 구성

- 애플리케이션 루트 모듈을 기본 적으로 이용하고 하위 모듈 구성을 추가한다

@NgModule({ imports: [ Angular 모듈, routing 모듈, ... ], declarations:[ 컴포넌트,. 지시자, 파이프 ... ], providers:[ 서비스 모듈,.... ], ... }) export class MyModule{}  

- @NgModule : @NgModule 장식자 내부에 모듈을 구성

4. 서비스

- 재사용 가능한 로직을 정의하기 위한 용도로 컴포넌트 외부에 정의

1) 서비스 정의(@Injectable)

@Injectable import{ Injectable} from '@angular/core'; export class HelloService{ }  

2) 서비스 사용의 예

- 로깅 서비스

- 테스트 

- 환경 설정과 공통 변수 관리

5. 지시자

- AngularJs는 선언형 프로그래밍(지시자를 이용한 개발)

- 컴포넌트의 템플릿에서 엘리먼트 속성과 같이 구성요소의 속성이나 이름으로 표현

- 지시자를 이용하면 UI 로직 코드를 반복적으로 입력할 필요가 없다

- 지시자는 화면 출력시 필요한 기능을 외부 모듈로 분리해 정의

1) helloStyle 지시자의 템플릿 표현

@Component({ selector : 'my-component', template : '<div helloStyle></div> })  

2) 커스텀 지시자의 예 @Directive

import{Directive, Elmenent, Renderer} from '@angular/core'; @Directive({ selector : '[helloStyle]' }) export class HelloStyleDirective{ constructor(private el : ElmenentRef, private renderer : Renderer){ } .... }