NgModules

NgModules

기본적으로 아래 두 개념을 알아두셔야 합니다.

• Bootstrapping.
• JavaScript Modules vs. NgModules.

NgModules 은 주입기(injector)와 컴파일러로 구성며, 관련있는 것들을 조직화 하는것을 돕습니다.

NgModule은 @NgModule 데코레이터로 마킹된 하나의 클래스 입니다. 

@NgModule은 런타임에 주입기를 어떻게 생성하고, 컴포넌트의 템플릿을 어떻게 컴파일 할지 기술하는  메타데이터 객체를 갖습니다. 

이것은 모듈이 소유한 컴포넌트, Directives(HTML의 속성으로 확장된 ng-app), pipes( {{value | pipe_function}} ), exports 속성을 통해서 일부를 public으로 만들어 , 외부 컴포넌트가 사용할 수 있도록 합니다.

물론 @NgModule를 사용하여 어플리케이션 의존성 주입기에 service provider로 추가할 수 있습니다.

예제로 pages cover에 관련된 NgModuels의 모든 기술들을 보여줍니다. live example / download example 를 참고하세요.

각 기술에 대한 설명은, 아래 있는 NgModules 섹션을 눌러 참고하세요.

Angular modularity (앵귤러 모듈화 링크)

모듈은 외부 라이브러리로부터의 확장과 어플리케이션 조직화하기에 훌륭한 방법입니다.

앵귤러 라이브러리는 NgModule이고,  FormsModule, HttpClientModule, 그리고 RouterModule 를 예로 들 수 있습니다.

많은 third-party 라리브러리는 NgModule로써 사용가능합니다 예를 들어  Material Design, Ionic, 와 AngularFire2가 있습니다.

NgModule은 컴포넌트, directive, 그리고 재사용 가능한 기능 단위의 pipe, 비지니스 도메인 어플리케이션, *workflow 또는 유틸의 common collection을 하나로 병합해 놓았습니다.

*workflow
workflow는 extensibleService를 확장합니다. 

말인 즉슨 모든 workflow는 extensibleService로부터 제공하는 method와 속성을 상속합니다.

확장은 자기만의 step을 추가하거나, 존재하는 step을 제거하거나, custom 데이터를 조작하는 로직을 주입할 수 있도록 허용합니다.

또한 모듈은 어플리케이션에 service를 추가할 수 있습니다. 

내부적으로 개발자가 스스로 개발 한 것이나 외부의 소스로써 Angular router 나 HTTP client같은것도 추가할 수 있습니다.

모듈은 어플리케이션이 시작될 때  router(라우터)에 의해 eagerly로 로딩되거나 비동기(asynchronously)한 lazy 로딩을 합니다. 

NgModule 메타데이터는 다음과 같습니다 :

• 모듈에 포함된 컴포넌트, directiv, pipe를 선언합니다.
• 다른 모듈의 컴포넌트 템플릿이 사용할 수 있도록 컴포넌트, directive, pipe를 public으로 만듭니다.
• 컴포넌트, directive, pipe를 갖는 다른 모듈을 임포트합니다.
• 다른 어플리케이션 컴포넌트가 사용할 수 있도록 service를 제공합니다.

모든 앵귤러 앱은 적어도 1개의 모듈을 갖고 있으며, 루트 모듈입니다. 어플리케이션은 부트스트랩 모듈을 작동시킵니다.

루트 모듈은 몇개의 컴포넌트로 구성된 간단한 어플리케이션 입니다. 앱이 진화할수록, 루트 모듈안에 있는 feature modules 을 리팩토링 하면 됩니다.

그 다음 루트 모듈에 해당 모듈들을 임포트하면 됩니다.

NgModule의 기본 (The basic NgModule)

CLI는 앱을 새로 만들 때 다음과 같은 기본 앱 모듈을 생성합니다.

src/app/app.module.ts

// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ItemDirective } from './item.directive';


// @NgModule decorator with its metadata
@NgModule({
  declarations: [
    AppComponent,
    ItemDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

가장 위에 있는 임포트 문에서. 그 다음 섹션은 어디에 @Ngmodule가 어떤 컴포넌트와 directive가 속해져있는지 명세하고 이것(선언)으로 다른 모듈이 사용하기 쉽도록 합니다(imports). 이 페이지는  Bootstrapping은 NgModule의 구성을 포함하여 빌딩되었습니다. 만약 @NgModule의 구성에 대해 더 알고 싶다면,  Bootstrapping을 읽어보세요.