Web/AppAngular2

6장. 모듈

,

6장. 모듈

앵귤러 애플리케이션을 구성하는 뼈대와 같은 역할. @NgModule 장식자를 이용한다
import {Component} from ‘@angular/core’;
와 같이 이용하는데 Component는 사용할 모듈이고, @angular/core는 패키지이다.

라이브러리 모듈 147p

앵귤러가 제공하는 모듈. ex) 지시자, 파이프, 장식자, 클래스, 인터페이스, 함수, Enum, 타입 별칭(type alias), 상수

사용자 정의 모듈 147p

컴포넌트나 지시자와 같이 장식자를 이용한 모듈과 서비스와 함수 값과 같이 장식자가 없는 모듈로 구분됨.
외부로 공개할 모듈은 export를 이용해 선언(ES6부터 지원)

애플리케이션 루트 모듈 149p

앵귤러는 애플리케이션 루트 모듈이라는 최상위 모듈을 통행 애플리케이션 모듈을 구성한다. 하지만 이 안에 모든 모듈을 구성할 수 없기 떄문에 의미론적으로 - 특징모듈 (개별 컴포넌트 단위가 아닌 단위 애플리케이션을 구성하는 모듈)

  • 공유모듈 (다른 모듈에 포함되어 동작하는 모듈 (반복적으로 선언되는 모듈))
  • 핵심모듈 (애플리케이션에서 항상 동작할 필요가 있거나 애플리케이션의 전체적인 동작에 핵심적인 역할을 하는 모듈(ex) 타이틀 컴포넌트)
    로 나눔.

애플리케이션 루트 모듈은 @Ngmodule 장식자를 이용해 정의한다.

1
2
3
4
5
6
7
@Ngmodule({
    imports : [BrowserModule, CommonModule, FormsModule ...] ,
    providers : [] ,
    declarations : [AppComponent, ...]
    bootstrap : [AppComponent]
  })

@Ngmodule내 import영역

브라우저 모듈(BrowserModule) 151p

브라우저 모듈은 앵귤러가 브라우저에서 동작한다면 반드시 포함되어야함. 지시자, 파이프 같은 구성요소를 템플릿에 나타나게 하는 역할을 함.
브라우저 모듈은 공통 모듈을 재노출(re-exports) 한다는 것이다. 이 때문에 브라우저 모듈을 이미 선언했다면 공통 모듈을 선언하지 않아도 된다.

공통모듈(CommonModule) 151p

템플릿에서 사용하는 ngIf나 ngFor와 관련된 기능을 포함하고 있는 모듈이다.

폼모듈(FormsModule) 152p

템플릿에서 자주 사용하는 NgModel지시자나 내장 검증기 지시자 등을 포함하고 있다. 그래서 폼 모듈을 포함하면 NgModel과 같이 자주 사용하는 지시자를 별도로 추가하지 않아도 된다.

AppRoutingModule 152p

사용자가 정의할 수 있는 라우팅 모듈이다. 애플리케이션 루트 모듈에 추가한 라우팅모듈은 애플리케이션 수준에서 라우팅을 수행한다.

@Ngmodule내 provider영역

애플리케이션 전역에서 사용할 서비스를 등록.

@Ngmodule내 declarations영역

애플리케이션 레벨에서 사용하고자 하는 컴포넌트, 지시자 파이프를 선언한다.

@Ngmodule내 bootstrap영역

최상위 컴포넌트인 애플리케이션 컴포넌트를 등록

router-outlet 152p

하위 특정 컴포넌트로 라우팅 후 하위 컴포넌ㅌ를 표시할 목적으로 라우터 아룰렛 지시자를 포함한다. 라우터 아울렛에 표시할 컴포넌트가 있다면 애플리케이션 라우팅 모듈 설정에 등록한다.

1
2
3
4
5
6
7
8
9
10
const appRoutes:Routes = [
  { path: '', component: IntroComponet},
  { path: 'hello', component: HelloComponent},
  ...
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports:[RouterModule]
  })

appRoutes 변수는 라우팅 설정을 담고 있으며 입력 URL에 대응하는 컴포넌트로 라우팅 되게 한다. appRoutes변수는 forRoot() 메소드를 이용해 등록한다. 유의할 점은 애플리케이션 라우팅 모듈에서만 한 번만 사용돼야 하고 특징 모듈에서는 사용하면 안된다.

애플리케이션 루트모듈에서는 다음과 같이 inports를 해줘야 한다.

1
2
3
@Ngmodule({
    imports : [AppRoutingModule ...] ,

핵심모듈 155p

앵귤러 어플리케이션 관점에서 핵심이 되는 모듈로 애플리케이션 루트 모듈에 한번 설정함을써 애플리케이션 레벨에서 사용할 수 있는 모듈을 말한다. 루트 모듈에 등록됐다는 것은 애플리케이션이 시작될 때 처음 한 번만 호출해서 전역으로 사용하겠다는 의미이다. 대표 예로 타이틀 컴포넌트가 있다. 보통 핵심 모듈은 /app/core에 위치시킨다.

특징모듈 161p

모듈이 많아지면 모듈 구성이 복잡해지며 지시자의 이름충돌 등의 문제가 발생할 수 있다. 이를 방지하기 위해 애플리케이션 루트 모듈에서 하위 모듈로 분리하는 것을 특징 모듈이라 한다. 특징 모듈에 선언한 모듈은 다른 모듈에 노출하거나 숨길수도 있다.

추가예정..

Share