Angular 2
모듈

소개

간단한 모듈

모듈은 @NgModule 데코레이터가있는 클래스입니다. 모듈을 생성하기 위해 @NgModule 매개 변수를 전달하는 @NgModule 을 추가합니다.

• bootstrap : 응용 프로그램의 루트가 될 구성 요소입니다. 이 구성은 루트 모듈에만 있습니다.
• declarations : 모듈이 선언 한 리소스. 새 구성 요소를 추가 할 때 선언을 업데이트해야합니다 (자동 ng generate component )
• exports : 다른 모듈에서 사용할 수있는 모듈 내보내기 리소스
• imports : 모듈이 다른 모듈에서 사용하는 자원 (모듈 클래스 만 허용됨)
• providers : 구성 요소에 주입 할 수있는 자원 (di)

간단한 예 :

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
@NgModule({
  bootstrap: [AppComponent]
  declarations: [AppComponent],
  exports: [],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule { }

모듈 중첩

모듈은 @NgModule 데코레이터의 imports 매개 변수를 사용하여 중첩 될 수 있습니다.

우리는 만들 수 있습니다 core.module 유사한 일반적인 것들을 포함 우리의 응용 프로그램에서, ReservePipe (문자열을 리버스 파이프)이 모듈들을 번들 :

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReversePipe } from '../reverse.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [ReversePipe], // export things to be imported in another module
  declarations: [ReversePipe],
})
export class CoreModule { }

그런 다음 app.module :

import { CoreModule } from 'app/core/core.module';

@NgModule({
  declarations: [...], // ReversePipe is available without declaring here
                       // because CoreModule exports it
  imports: [
    CoreModule,        // import things from CoreModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }