모듈 개념
- Angular 프로젝트는 하나 이상의 NgModule로 구성되어 있으며, 모든 Angular 애플리케이션에는 최상위 모듈인 AppModule이 존재한다. AppModule은 최초 프로젝트 생성시 app.module.ts 란 파일에 정의된다. 확인해보면 AppModule에서만 @NgModule 메타데이터 속성에 bootstrap 속성이 있는 것을 확인할 수 있다.
- 모든 NgModule은 @angular/core의 NoModule 을 로드한다.
import { NgModule } from '@angular/core';
NgModule 메타 데이터
- declarations : 해당 NgModule에 포함될 컴포넌트, 디렉티브, 파이프를 선언한다.
- exports : 해당 NgModule에 구성요소를 다른 NgModule이나 컴포넌트 템플릿으로 재사용할 수 있도록 외부로 공개할 때 사용한다.
- imports : 다른 모듈에서 공개한 클래스를 지금 사용하는 NgModule에 가져올 때 사용한다.
- providers : 해당 NgModule 컨텍스트 안에서 사용할 서비스 프로바이더를 정한다. 컴포넌트 단에서도 사용할 서비스 프로바이더를 import 구문을 통해서 불러올 수도 있다.
- bootstrap : 애플리케이션의 최상위 뷰로 표시될 최상위 컴포넌트를 지정한다. 하나의 Angular 애플리케이션에서는 boostrap이 선언된 NgModule을 하나만 가질 수 있다.
NgModule과 Javascript 모듈과의 관계
- 우선적으로 Javascript 모듈은 각각의 파일 하나가 모듈이 되며 이 파일에 정의된 모든 객체가 해당 모듈안에 속한다고 할 수 있다. 그리고 이를 외부에 공개하기 위해서는 export 라는 키워드를 사용해야 한다. 그리고 다른 javascript모듈에서 사용하기 위해서는 import 키워드를 사용해서 불러와야한다.
- NgModule은 Javascript 모듈과 같은 형태로 제공된다. (export를 통해 공개되고, import를 통해 불러올 수 있다.)
'Study > Angular' 카테고리의 다른 글
[정리] Angular Module 역할적 개념으로 모듈 분리 (0) | 2020.09.21 |
---|---|
[개념] Angular Component (0) | 2020.09.09 |
[개념] Angular 프레임 워크 컨셉 (0) | 2020.09.08 |