angular2 ngmodule

NgModuleby peter yun

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 - imports

Metadata - declarations

- 컴포넌트가 다른 컴포넌트를 템플릿에서 사용할 때 이전방식은사용하는 컴포넌트에서 directives: [...] 설정 - deprecated 예정

- NgModule({ declarations: [ AComponent, BDirective, CPipe] });

Metadata - declarations

- 모듈에 속하는 component, directive, pipe 를 declarations 에 설정 ( 컴포넌트를 new 한다 .)

- 다른 컴포넌트에 directives: [], pipes: [] 설정이 필요없어짐

Metadata - declarations

Metadata - providers- 전체 애플리케이션에 DI 가능토록 설정 root injector 를 통해 해당 서비스들을 설정한다 .

- module level 의 injector 는 존재하지 않는다 .

- 내부에서만 사용하는 서비스는 컴포넌트에 직접 providers 설정해서 사용한다 .

- Lazy Loaded Module 에 providers 는 설정하지 않는다 (routing설정 )

Metadata - providers

Metadata - exports

- 의도한 것 만을 보이게 한다 .- 내부에서 사용하는 Directive, Pipe 등을 숨길 수 있다 . 즉 ,

declaration 해서 내부에서 사용하는 Directive, Pipe 들은 private 이 되고 , exports 한 것만 외부에서 사용할 수 있다 . - Feature, Layer Module 이 될 수 있다 .

Metadata - exports

Metadata - exports

Metadata - bootstrap

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

Metadata - bootstrap

forRoot(): ModuleWithProviders- AppModule 에만 서비스 Provider 를 제공하고 싶을 경우 사용한다 .

- NgModule() 내용만 다른 모듈에서 사용가능하고 , AppModule 에 SharedModule 등록시에 forRoot() 를 호출한다 . ( 전장의 AppModule 참조 )

Jamong Layer 별 모듈 구조

VDK Module

Common Module

App Module Platform

Module

참조- 공식문서 : 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_gcMrwlXOqo/edit