Angular2 NgModule
Download as PPTX, PDF5 likes782 views
Angular2 rc5 - NgModule - Korean
![Root NgModule 만들기
- 파일: app.module.ts
- 데코레이션: @NgModule({ … metadata … })
imports: 의존 관계 모듈
declarations: application의 컴포넌트 tree에 포함되는 컴포넌트들 목록
정의,
기존 컴포넌트에 directives: [...] 넣었던 것을 제거 시켜줌
boostrap: 최초 수행 기동할 컴포넌트](https://image.slidesharecdn.com/angular2-ngmodule-160815073626/85/Angular2-NgModule-7-320.jpg)
![Metadata - declarations
- 컴포넌트가 다른 컴포넌트를 템플릿에서 사용할 때 이전방
식은
사용하는 컴포넌트에서 directives: [...] 설정 - deprecated
예정
- NgModule({
declarations: [ AComponent, BDirective, CPipe]
});](https://image.slidesharecdn.com/angular2-ngmodule-160815073626/85/Angular2-NgModule-16-320.jpg)
![Metadata - declarations
- 모듈에 속하는 component, directive, pipe 를 declarations
에 설정 (컴포넌트를 new 한다.)
- 다른 컴포넌트에 directives: [], pipes: [] 설정이 필요없어짐](https://image.slidesharecdn.com/angular2-ngmodule-160815073626/85/Angular2-NgModule-17-320.jpg)
Angular2 NgModule
- 2. Concept - To organize the application - To consolidate components, directives, services and pipes - To be lazy loaded async by the router
- 3. Concept Module block Module block Module block Big Module block Module block Module block Module block Big Module block App Module block
- 4. Module Block 종류 - 기능: Feature Formatter, Utils, State 실제 수행 단위 블럭 - 계층: Layer VDK, Common, Portal 의존관계 논리적인 블럭 - 애플리케이션: Domain 기능 + 계층 블럭을 사용하는 블럭
- 5. NgModule Metadata - component, directive, pipe 선언하기 (declare) - 다른 컴포넌트에서 사용할 수 있도록 public 으로 만들기 - 구현 상세내역은 숨길 수 있음 - 다른 모듈 import 해서 component, directive, pipe 사용 하기 - service provide 를 애플리케이션 레벨로 하기
- 6. NgModule 갯수 애플리케이션에서 반드시 하나는 존재해야 한다. === Root Module
- 7. Root NgModule 만들기 - 파일: app.module.ts - 데코레이션: @NgModule({ … metadata … }) imports: 의존 관계 모듈 declarations: application의 컴포넌트 tree에 포함되는 컴포넌트들 목록 정의, 기존 컴포넌트에 directives: [...] 넣었던 것을 제거 시켜줌 boostrap: 최초 수행 기동할 컴포넌트
- 8. Root NgModule 만들기 - 파일: app.module.ts
- 9. JIT Compiler - Just-In-Time: 브라우져에 보여질 애플리케이션 컴파일 - @angular/platform-browser-dynamic 의 platformBrowserDynamic 이용 -> 기존은 bootstrap
- 10. JIT Compiler - NgModule 에는 Components, Directives, Pipes가 쓰이는 지 정의가 되고, 이를 이용해 NgModule안에 사용하는 Component, Directive의 Template에 대한 컴파일 시점을 결정한다. - JIT는 브라우져에 보이는 시점이다.
- 11. AOT Compiler - Ahead Of Time Compiler: 미리 템플릿 바인딩을 컴파일함 - @angular/platform-browser 의 platformBrowser 이용
- 12. AOT Compiler - pre-compile 된 static file 을 미리 만들어 놓는다. - 초기 로딩 성능 향상이 목적
- 13. 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 - 자동설정됨
- 14. Metadata - imports - 모듈안에서 사용할 의존 관계의 모듈을 설정한다.
- 16. Metadata - declarations - 컴포넌트가 다른 컴포넌트를 템플릿에서 사용할 때 이전방 식은 사용하는 컴포넌트에서 directives: [...] 설정 - deprecated 예정 - NgModule({ declarations: [ AComponent, BDirective, CPipe] });
- 17. Metadata - declarations - 모듈에 속하는 component, directive, pipe 를 declarations 에 설정 (컴포넌트를 new 한다.) - 다른 컴포넌트에 directives: [], pipes: [] 설정이 필요없어짐
- 19. Metadata - providers - 전체 애플리케이션에 DI 가능토록 설정 root injector를 통해 해당 서비 스들을 설정한다. - module level의 injector는 존재하지 않는다. - 내부에서만 사용하는 서비스는 컴포넌트에 직접 providers 설정해서 사용한다. - Lazy Loaded Module에 providers는 설정하지 않는다 (routing설정)
- 21. Metadata - exports - 의도한 것 만을 보이게 한다. - 내부에서 사용하는 Directive, Pipe 등을 숨길 수 있다. 즉, declaration 해서 내부에서 사용하는 Directive, Pipe 들은 private 이 되고, exports 한 것만 외부에서 사용할 수 있다. - Feature, Layer Module 이 될 수 있다.
- 24. Metadata - bootstrap - 최초 수행할 컴포넌트 - AppModule 한 곳만 등록한다
- 26. forRoot(): ModuleWithProviders - AppModule에만 서비스 Provider를 제공하고 싶을 경우 사용한다. - NgModule() 내용만 다른 모듈에서 사용가능하고, AppModule에 SharedModule 등록시에 forRoot() 를 호출한다. (전장의 AppModule 참조)
- 27. Jamong Layer 별 모듈 구조 VDK Module Common Module App Module PlatformModule
- 28. 참조 - 공식문서: 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