앵플은 @NgModule데코레이팅된 클래스를 모듈이라 부르며 자바스크립트의 모듈이 아니다.
모듈에는 메타데이터로 구성 컴포넌트들, 사용 라이브러리들등 유사한기능의 컴포넌트들을 모듈화 관리하기위한 묶음이다.
모든 어플리케이션은 최상위모듈이 반드시 존재하며 이 모듈은 보통 app.module.ts에 AppModule이라고 정의된다. 어플리케이션은 이 NgModule을 부트스트랩하며 시작된다.
NgModule메타데이터
NgModule은 클래스에 @NgModule를 붙여서 정의하는데 메타데이터 객체를 전달한다.
-
declarations : 해당 모듈을 구성하는 컴포넌트, 디렉티브, 파이프를 선언한다.
-
exports : 모듈 구성요소를 다른 모듈이나 템플릿에 사용가능하도록 외부에 공개한다.
-
imports : 다른 모듈에서 공개한 클래스를 가져온다.
-
providers : 모듈에서 사용되는 서비스클래스 인스턴스가 이 모듈에서 생성됨을 지정한다.
-
bootstrap : 최상위모듈인 경우 부트스트랩으로 사용될 컴포넌트를 지정한다.
모듈과 컴포넌트
모듈은 유사한 기능의 컴포넌트들로 구성되며 일반적으로 컴포넌트들은 게층구조를 가진다.
컴포넌트중 최상위 컴포넌트가 호스트뷰(host view)를 구성하며 뷰내부에 컴포넌트를 삽입하여 종속뷰(enbedded view)를 자유롭게 구성할 수 있다.
종속뷰는 최상위 컴포넌트와 같은 모듈에 있을 수도 있고 외부 모듈의 컴포넌트를 사용할 수 도 있다.
Angular 라이브러리
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class CartModule { }@NgModule데코레이터를 사용하려면 @angular/core로부터 NgModule을 import해야 한다.
앵귤러 프레임워크는 많은 기능을 자바스크립트 모듈로 제공하기 때문에 위와같이 라이브러리를 import구문으로 불러와 사용한다.
import {BrowserModule} from '@angular/core';imports: [ BrowserModule ],프레임워크가 BrowserModule 클래스를 사용해 인스턴스를 만들려면 라이브러리를 먼저 import해야 한다.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class CartModule { }import { ... }는 라이브러리를 사용하기 위해 로드하는 것이고
imports: [ ] 는 불러온 라이브러리를 사용해 프레임워크가 인스턴스를 만들기 위해 선언하는 것이다.
