Angular의 개요

Angular에 대한 세부적인 포스팅을 하기 전에 먼저 간단하게 개요를 정리 합니다.

Angular란?

• 구글에서 만든 open-souce web application
• SPA(Single Page Application) 개발이 가능
• 다양한 플랫폼에 맞게 개발 가능
• 유지보수, 개발 속도 향상 (데이터 바인딩, 템플릿 등의 문법 제공 )

아키텍쳐

Angular의 구성요소

Angular2를 구성하는 요소는 크게 4가지 입니다.

• 컴포넌트 (Component)
• 모듈 (Module)
• 서비스 (Service)
• 지시자 (Directive)

컴포넌트 (Component)

• Angular는 컴포넌트를 중심으로 개발함
• 컴포넌트는 화면을 구성하기 위한 하나의 단위로 봄
• 기본적으로 템플릿 + 지시자 + 클래스 조합으로 구성
• 템플릿은 컴포넌트의 UI를 담당하며 가상DOM에 저장되므로 컴포넌트간 스타일에 영향을 받지 않음
• 템플릿은 Angular에서 제공하는 HTML 템플릿 문법을 사용하여 클래스와 데이터나 이벤트를 바인딩함
• 클래스는 컴포넌의 로직을 관리함
• 컴포넌트마다 라이프사이클이 있으며 hook이 제공됨

기본구성

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

@Compoent({
    // component element 이름
    selector: 'ex-compoent',
    // view html (or templateUrl)
    template: '<div>{{msg}}</div>',
    // css code (or styleUrls)
    styles: [`div {color: red}`]
})

export class MyComponent {
    msg: string = "hello";
}

Data binding

바인딩 방향	입력방식	문법
단방향	표현식	{{표현식}}, [target] = “표현식”, bind-target=”표현식”
단방향	명령식	(target) = “명령식”, on-target = “명령식”
양방향	표현식	[(target)] = “표현식”, bindon-target = “표현식”

컴포넌트에서는 템플릿으로 Property값으로 바인딩을 하고 템플릿에서는 컴포넌트로 이벤트로 바인딩을 함.

component에서 template으로 data 바인딩(단방향)

component –> template

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

// component
@Compoent({
    template: `<div>{{name}}</div>`
})
class ExComponent {
    name: string = '아이언맨';
}
// 화면

[propery]=”value”: 해당 propery에 data 바인딩(단방향)

component –> template

// parentsComponent
@Compoent({
    template: `<exComponent [name]="name"/>`
})
class ParentsComponent {
    name: string = '아이언맨';
}
// exComponent
@Compoent({
    selector: 'exComponent'
    template: `<div>{{name}}</div>`
})
class ExComponent {
    @Input() name: string;
}
// exComponent 화면

(event)=”handler”: event를 전달한다.(단방향)

component <– template

// compoent
@Compoent({
    template: `<div (click)="testClick('로보트')">click</div>`
})
class ExComponent {
    testClick(name) {
        console.log(`나는 ${name}입니다.`);
    }
}
// 클릭시 console창에
/* 나는 로보트입니다. 표시 */

[(ng-model)]=”propery”: template과 Compoent의 양방향 바인딩

component <–> template

@Compoent({
    template: `<input [(ngModel)]="name"> {{name}}`
})
class ExComponent {
    name: string = '로보트'
}

모듈 (Module)

• 모듈은 Angular에서 제공하는 라이브러리 모듈과 사용자 정의 모듈이 있음
• export 키워드를 사용하여 모듈을 정의하고 외부에 노출할 수 있음
• 최소 1개 이상의 모듈이 있어야 함
• component, directive(지시자), 파이프 등이 있음

export class MyComponent { }

• 정의된 모듈은 임포트해서 사용할 수 있음

import { MyComponent } from './MyComponent';

모듈 시스템

• 모듈시스템은 컴포넌트, 지시자, 파이프와 같은 구성 모듈을 통합적으로 관리할 수 있게 해줌
• 모듈구성은 기본적으로 `애플리케이션 루트 모듈을 이용함
• 규모가 커지면 특징모듈과 같은 하위 모듈 구성을 추가하여 사용함
• 모듈 구성은 기본적을 @NgModule 장식자를 사용함

기본구성

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// ngModule decorator
@NgModule({
  // import할 모듈 리스트(Angular 모듈, routing 모듈..)
  imports:      [ BrowserModule ],
  // 모듈에 속하는 컴포넌트, 디렉티브(지시자), 파이프 클래스들의 리스트
  declarations: [ AppComponent ],
  // DI providers 리스트 (서비스 모듈...)
  providers:    [ Logger ],
  // import하는 모듈이 쓸 수 있는 declarations 리스트
  exports:      [ AppComponent ],
  // bootstrap 가능한 컴포넌트 리스트
  bootstrap:    [ AppComponent ],
  // 어느 템플릿에서도 참조되지 않은 컴포넌트의 리스트
  entryComponents: [ AppComponent ]
})
export class AppModule { }

서비스 (Service)

• 재사용 가능한 로직을 정의 하기 위해 사용함 (중복로직을 최소화)
• 컴포넌트에서 직접적으로 관심없는 로직을 정의하고 사용함
• 의존성 주입으로 서비스를 활용함
• @Injectable 장식자를 사용해서 서비스라는 것을 선언함
• 로깅 서비스, 테스트를 위한 목 객체서비스, 애플리케이션 환경설정과 변수관리 서비스등에 주로 사용함

로깅서비스 예제

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}
export class HeroService {
  private heroes: Hero[] = [];
  constructor(
    private _backend: BackendService,
    private _logger: Logger) { }
  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });
    return this.heroes;
  }
}

DI (Dependency injection) : 의존성 주입

• 클래스의 새로운 인스턴스에 필요한 종속성을 제공하는 방법.
• @Injectable을 사용하여, Injector에 service들을 등록 시킴.

@Injectable()
class ExService {
    plusNumber(a: number, b:number) {
        return a + b;
    }
}
@Compoent({
    ...
})
class ExComponent {
    // 아래와 같이 의존성 주입을 한다.
    constructor(private _exService: ExService) {}
    plusNumber(a: number, b: number) {
        console.log(this._exService.plusNumber(a, b));
    }
}

지시자(Directive)

• Angular에서 제공하는 내장 지시자와 직접 제작해서 사용할 수 있는 커스텀 지시자가 있음
• Component에서 template(view)만 빠진 것이라고 생각하면 된다.
• angular에서 기본으로 제공하는 directive들이 있음
• DOM을 다루는 방식임

import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive ({
    selector: '[helloStyle]',
})

export class HelloStyleDirective {
    constructor (private el: ElementRef, private renderer: Renderer) { }
    ...
}

▲ 위의 형태로 지시자를 정의함

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

})

▲ 정의된 지시자를 위의 예제처럼 helloStyle로 사용함.