[Angular] Angular 모듈

Angular 라이브러리 모듈의 종류로는 크게 지시자, 파이프, 장식자, 클래스, 인터페이스, Enum, 타입 별칭, 상수가 있음.

@angular/common : 파이프, 구조 지시자, 속성 지시자 관련 모듈
@angular/core : 주요 요소 장식자 및 핵심 모듈
@angular/forms : 폼 관련 모듈, 지시자
@angular/http : HTTP 통신과 관련된 모듈
@angular/platform-browser : 브라우저 모듈, DOM 새니타이저 등
@angular/router : 라우터 관련 모듈이나 지시자
@angular/testing : 테스팅 관련 모듈

Angular 모듈

모듈성이란 성능을 향상 시킬 수 있도록 모듈 간 결합을 최소화하고, 모듈 내부의 응집도는 최대화하는 것을 의미한다.
Angular 모듈은 모듈성을 극대화시키기 위해서 모듈을 그룹 단위로 관리.
루트모듈/핵심모듈/특징모듈/공유모듈 로 나누어 관리한다.

루트모듈

최상위 모듈로서, 컴포넌트, 지시자, 서비스, 파이프와 같은 모듈을 등록하고 관리.
루트모듈은 @NgModule 장식자를 이용해 정의

import { MyComponent } from './my.component';
@NgModule({
  imports: [
  	BrowserModule, CommonModule, FormsModule,
    AppRoutingModule,
    CoreModule.forRoot({nickName: 'Happy'}), // 매개변수 전달
    ...
  ],

  declarations : [
    컴포넌트, 지시자, 파이프,
  ],

  providers: [서비스 모듈, ...]
  ,
  ...
})

imports 속성
브라우저 모듈(Browser Module)

브라우저 상에서 동작한다면 반드시 포함, 컴포넌트나 지시자, 파이프 같은 구성요소를 템플릿에 나타나게 하는 역할.

공통 모듈(Common Module)

템플릿에 사용하는 ngIf, ngFor와 관련된 기능 포함(브라우저 모듈에 포함)

폼 모듈(FormsModule)

NgModel 지시자나 내장 검증기 지시자 등을 포함.

라우딩 모듈(RoutingModule)

어플리케이션 수준에서 라우팅 수행

라우팅 모듈 설정
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { IntroComponent } from './intro.component';
import { HelloComponent } from './hello/hello.component';
import { CoreTestComponent } from './core-test/core-test.component';

const appRoutes: Routes = [
  { path: '', component: IntroComponent },
  { path: 'hello', component: HelloComponent },
  { path: 'lazy', loadChildren: 'app/player/player.module#PlayerModule' },
  { path: 'core-test', component: CoreTestComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

forRoot를 이용해 라우트를 등록, app.module.ts 파일 imports에 추가

providers 속성
전역에서 사용할 서비스 등록

ex) 개발단계에서 전역적으로 사용되는 로거 서비스

declarations 속성
어플리케이션 레벨에서 사용하고자 하는 컴포넌트, 지시자 파이프. imports내에서 선언된 내용들을 재선언해서는 안된다.

bootstrap 속성
최상위 컴포넌트인 애플리케이션 컴포넌트 등록

entryComponents
페이지 컴포넌트를 등록

핵심 모듈
항상 동작할 필요가 있거나, 어플리케이션 전체 동작에 핵심적인 역할을 하는 모듈.

ex) 타이틀 컴포넌트 : 동작 내내 호출되어야 하기 때문

루트 모듈
imports에 핵심모듈 등록, CoreModule.forRoot({nickName: 'Happy'})

핵심모듈

특징모듈
단위 어플리케이션(특정 기능 수행하는 여러 컴포넌트, 서비스 등의 집합)을 구성하는 모듈, 하위 분리하는 모듈.

ex) 게시판 = 단위 어플리케이션 = 리스트컴포넌트 + 글쓰기 컴포넌트 + …

특징 모듈 선언

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';
import { FormsModule }        from '@angular/forms';

import { MemberListComponent }   from './member-list.component';
import { HighlightDirective } from './highlight.directive';
import { MemberRoutingModule }   from './member-routing.module';
import { MemberService }     from './member.service';

@NgModule({
  imports:      [ CommonModule, FormsModule, MemberRoutingModule ],
  declarations: [ MemberListComponent, HighlightDirective ],
  providers:    [ MemberService ]
})
export class MemberModule { }