Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Angular2 NgModule

655 visualizaciones

Publicado el

Angular2 rc5 - NgModule - Korean

Publicado en: Software
  • Inicia sesión para ver los comentarios

Angular2 NgModule

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

×