NgModule는 @NgModule()로 수식되어진 클래스로 정의된다. @NgModules 데코레이터는 프로퍼티가 모듈을 설명하는 하나의 메타데이터 객체를 입력받는 함수이다. 이 메타데이터 객체의 중요한 프로퍼티에는 다음과 같은 것들이 있다.
- declarations: 현 NgModule에 속하는 컴포넌트, 디렉티브, pipe
- exports : 다른 NgModule의 템플릿에서 보여질 수 있으며 사용가능한 정의들의 부분집합
(쉽게 말해 현 모듈의 기능을 다른 모듈이 사용할 수 있도록 내보내는 것)- imports : 현 NgModule에 정의된 컴포넌트 템플릿이 참조하는 클래스를 export하는 다른 모듈들
- providers: 현 NgModule이 영향을 미치는 서비스들의 생성자(프로바이더). NgModules에서 정의하고 사용되는 서비스들은 애플리케이션 전역에서 접근 가능해집니다. 그렇기에 컴포넌트 레벨에서 providers를 지정하는 것이 대게 선호됩니다.
- bootstrap: 다른 모든 애플리케이션 뷰를 호출하는 최상위(root) 컴포넌트를 지정합니다. 그렇기에 bootstrap 프로퍼티는 최상위 NgModule만이 가질 수 있습니다.
다음은 최상위 NgModule의 예시입니다.
//src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
//최상위 NgModule은 굳이 exports를 할 필요 없습니다.
// (다른 NgModule에서 참조 할 일이 없기 때문)
//여기서는 exports의 사용법을 보여주기 위하여 추가했습니다.
bootstrap: [ AppComponent ]
})
export class AppModule { }