2019-07-08 Angular NgModule

1. 모듈

 

SPA의 단점은 초기로딩속도가 느리다는 점이 있다.

초기로딩속도를 그래서 상승시키기 위해서는

루트모듈을 분할 하는 것과 lazy loading을 사용하는 것

 

Lazy loading : 초기로딩때 모듈을 다 부르는 것이 아니라 페이지에서 필요할때 모듈을 부르는 것

 

 

기능(Feature)

공유(share)

코어(core)

크게 위 3가지 모듈로 나뉜다.

 

기능은 관심사가 유사한 구성 요소로 구성한 모듈, 특정 화면을 구성하는 구성 요소

공유는 애플리케이션 전역에서 공유할 구성 요소들로 구성한 모듈로서 기능 모듈에 의해 임포트된다.

애플리케이션 전역에서 사용하는 컴포넌트, 디렉티브, 파이프 등

코어는 애플리케이션 전역에서 공통 사용할 구성 요소들로 구성한 모듈로서 루트 모듈에 등록하여 싱글턴으로 사용한다. 애플리케이션 전역에서 사용하는 데이터 서비스, 인증 서비스, 인증 가드 등

 

루트 모듈은 기능 모듈을 임포트하고 기능 모듈은 공유 모듈을 임포트하여 사용한다. 이렇게 모듈을 구성하여 기능 모듈의 중복을 제거하여 모듈 선언을 간소화한다. 다시 말해 공유 모듈은 루트 모듈에 직접 임포트되지 않고 기능 모듈에 의해 임포트되어 사용된다.

 

핵심 모듈은 루트 모듈의 구성을 보다 간결하게 관리할 목적으로 어떤 모듈에도 포함되지 않는 독립적인 요소를 루트 모듈에서 분리하여 구성한 모듈

 

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@ 데코레이터는 장식하는 클래스에 생성자의 관여를 한다.

 

import 루트 모듈이 사용하는 모듈을 쓸 수 있다.

루트 모듈에는 browserModule이 필수

browserModule브라우저에서 동작하는 애플리케션에 필요한 것들을 모아둔것

자체적으로 coreModule을 import하고 있음.

 

providers는 서비스만 써줌

 

루트모듈은

bootstrap을 반드시 써준다. ( 발화한다는 뜻을 가지고 있음)

AppMoudule은 모든 컴포넌트의 루트 컴포넌트이다. 얘가 가장 먼저 동작한다

 

provideIn: root 

전역 어디서든지 이 서비스를 사용가능하다.