[Angular] Module

Jaeyoung Lee·2020년 3월 14일
0

Angular 공식 가이드

목록 보기
2/2

NgModule 메타데이터

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 { }
profile
초보 개발자의 낙서장입니다.

0개의 댓글