[개념] Angular NgModule

모듈 개념

• Angular 프로젝트는 하나 이상의 NgModule로 구성되어 있으며, 모든 Angular 애플리케이션에는 최상위 모듈인 AppModule이 존재한다. AppModule은 최초 프로젝트 생성시 app.module.ts 란 파일에 정의된다. 확인해보면 AppModule에서만 @NgModule 메타데이터 속성에 bootstrap 속성이 있는 것을 확인할 수 있다.
• 모든 NgModule은 @angular/core의 NoModule 을 로드한다.

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

 

NgModule 메타 데이터

• declarations : 해당 NgModule에 포함될 컴포넌트, 디렉티브, 파이프를 선언한다.
• exports : 해당 NgModule에 구성요소를 다른 NgModule이나 컴포넌트 템플릿으로 재사용할 수 있도록 외부로 공개할 때 사용한다.
• imports : 다른 모듈에서 공개한 클래스를 지금 사용하는 NgModule에 가져올 때 사용한다.
• providers :  해당 NgModule 컨텍스트 안에서 사용할 서비스 프로바이더를 정한다. 컴포넌트 단에서도 사용할 서비스 프로바이더를 import 구문을 통해서 불러올 수도 있다.
• bootstrap :  애플리케이션의 최상위 뷰로 표시될 최상위 컴포넌트를 지정한다. 하나의 Angular 애플리케이션에서는 boostrap이 선언된 NgModule을 하나만 가질 수 있다.

 

NgModule과 Javascript 모듈과의 관계

• 우선적으로 Javascript 모듈은 각각의 파일 하나가 모듈이 되며 이 파일에 정의된 모든 객체가 해당 모듈안에 속한다고 할 수 있다. 그리고 이를 외부에 공개하기 위해서는 export 라는 키워드를 사용해야 한다. 그리고 다른 javascript모듈에서 사용하기 위해서는 import 키워드를 사용해서 불러와야한다.
• NgModule은 Javascript 모듈과 같은 형태로 제공된다. (export를 통해 공개되고, import를 통해 불러올 수 있다.)