Angular2 NgModule

Concept
- To organize the application
- To consolidate components, directives, services and
pipes
- To be lazy loaded async by the router

Concept
Module block Module block Module block
Big Module block
Module block Module block Module block
Big Module block
App Module block

Module Block 종류
- 기능: Feature
Formatter, Utils, State 실제 수행 단위 블럭
- 계층: Layer
VDK, Common, Portal 의존관계 논리적인 블럭
- 애플리케이션: Domain
기능 + 계층 블럭을 사용하는 블럭

NgModule Metadata
- component, directive, pipe 선언하기 (declare)
- 다른 컴포넌트에서 사용할 수 있도록 public 으로 만들기
- 구현 상세내역은 숨길 수 있음
- 다른 모듈 import 해서 component, directive, pipe 사용
하기
- service provide 를 애플리케이션 레벨로 하기

NgModule 갯수
애플리케이션에서 반드시 하나는 존재해야 한다.
===
Root Module

Root NgModule 만들기
- 파일: app.module.ts
- 데코레이션: @NgModule({ … metadata … })
imports: 의존 관계 모듈
declarations: application의 컴포넌트 tree에 포함되는 컴포넌트들 목록
정의,
기존 컴포넌트에 directives: [...] 넣었던 것을 제거 시켜줌
boostrap: 최초 수행 기동할 컴포넌트

Root NgModule 만들기
- 파일: app.module.ts

JIT Compiler
- Just-In-Time: 브라우져에 보여질 애플리케이션 컴파일
- @angular/platform-browser-dynamic 의
platformBrowserDynamic 이용 -> 기존은 bootstrap

JIT Compiler
- NgModule 에는 Components, Directives, Pipes가 쓰이는
지 정의가 되고, 이를 이용해 NgModule안에 사용하는
Component, Directive의 Template에 대한 컴파일 시점을
결정한다.
- JIT는 브라우져에 보이는 시점이다.

AOT Compiler
- Ahead Of Time Compiler: 미리 템플릿 바인딩을 컴파일함
- @angular/platform-browser 의 platformBrowser 이용

AOT Compiler
- pre-compile 된 static file 을 미리 만들어 놓는다.
- 초기 로딩 성능 향상이 목적

Metadata 형식
- declarations: 모듈안에서 사용하는 Component, Directive, Pipe
- imports : 모듈에서 사용할 다른 모듈 또는 Provider를 가진 모듈 (root injector를 위한 것임)
- exports: 외부로 노출할 Module, Component, Directive, Pipe
- providers: Lazy loaded module이면 Module Injector로 등록, 그외는 Root Injector로 등록
- entryComonents: bootstrap 컴포넌트 또는 lazy loaded될 때 entry component - 자동설정됨

Metadata - imports
- 모듈안에서 사용할 의존 관계의 모듈을 설정한다.

Metadata - declarations
- 컴포넌트가 다른 컴포넌트를 템플릿에서 사용할 때 이전방
식은
사용하는 컴포넌트에서 directives: [...] 설정 - deprecated
예정
- NgModule({
declarations: [ AComponent, BDirective, CPipe]
});

Metadata - declarations
- 모듈에 속하는 component, directive, pipe 를 declarations
에 설정 (컴포넌트를 new 한다.)
- 다른 컴포넌트에 directives: [], pipes: [] 설정이 필요없어짐

Metadata - providers
- 전체 애플리케이션에 DI 가능토록 설정 root injector를 통해 해당 서비
스들을 설정한다.
- module level의 injector는 존재하지 않는다.
- 내부에서만 사용하는 서비스는 컴포넌트에 직접 providers 설정해서
사용한다.
- Lazy Loaded Module에 providers는 설정하지 않는다 (routing설정)

Metadata - exports
- 의도한 것 만을 보이게 한다.
- 내부에서 사용하는 Directive, Pipe 등을 숨길 수 있다. 즉,
declaration 해서 내부에서 사용하는 Directive, Pipe 들은
private 이 되고, exports 한 것만 외부에서 사용할 수 있다.
- Feature, Layer Module 이 될 수 있다.

Metadata - bootstrap
- 최초 수행할 컴포넌트
- AppModule 한 곳만 등록한다

forRoot(): ModuleWithProviders
- AppModule에만 서비스 Provider를 제공하고 싶을 경우 사용한다.
- NgModule() 내용만 다른 모듈에서 사용가능하고, AppModule에
SharedModule 등록시에 forRoot() 를 호출한다. (전장의 AppModule
참조)

Jamong Layer 별 모듈 구조
VDK Module
Common Module
App Module
PlatformModule

참조
- 공식문서: https://angular.io/docs/ts/latest/guide/ngmodule.html
- 설명문서: https://docs.google.com/document/d/1isijHlib4fnukj-
UxX5X1eWdUar6UkiGKPDFlOuNy1U/pub#h.s0x91qpqpife
- 모듈LifeCycle Hook:
https://docs.google.com/document/d/1SCjDU1037CsAsXWs3tlFXFzhZtmotLw8_gcMrwlXOq
o/edit

Angular2 NgModule

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (12)

Similaire à Angular2 NgModule

Similaire à Angular2 NgModule (20)

Angular2 NgModule