Angular
-
HTML과 TypeScript로 FE를 개발할 때 사용하는 프레임 워크
-
각 화면을 나타내는 컴포넌트와 비즈니스 로직을 처리하는 서비스등 을 연관된 기능에 따라 NgModule로 묶어 사용
-
모듈, 컴포넌트, 서비스는 단순한 클래스이지만, 데코레이터를 통해 Angular가 해당 클래스가 어떤 것인지 앎
기본 구조
모듈
- Angular에서 제공하는 모듈 체계로 애플리케이션이 구성
- 연관된 기능의 컴포넌트, 서비스 등을 하나로 묶어서 관리
- 일부를 외부로 공개하거나, 외부에서 공개된 기능을 가져옴
app.moudel.ts파일에 최상위 모듈인 AppModule이 정의 되어 있고, 애플리케이션은 이 모듈을 부트스트랩
NgModule 메타 데이터
| 속성 | 설명 |
|---|---|
| declaration | 해당 NgModule에 포함될 컴포넌트나 디렉티프, 파이프를 선택 |
| exports | 듈의 구성 요소를 다른 NgModule이나 컴포넌트 템플릿으로 재사용할 수 있도록 외부로 공개 |
| imports | 다른 모듈에서 공개한 클래스를 지금 정의하는 NgModule에 가져올 때 사용 |
| providers | NgModule 컨텍스트 안에서 사용하는 서비스 프로바이더를 지정한다. 안에서 사용하는 서비스는 이렇게 지정된 서비스 프로바이더를 사용해 생성되며, 필요한 경우에는 하위 계층에 사용할 서비스 프로바이더를 따로 지정 가능 |
| bootstrap | 어플리케이션의 최상위 뷰로 표시될 최상위 컴포넌트를 지정한다. bootstrap 속성은 최상위 NgModule에만 지정 가능 |
NgModule과 컴포넌트
- NgModule은 컴포넌트가 컴파일 되는 시점의 컨텍스트를 제공한다. 최상위 NgModule은 생성하는 컴포넌트가 최상위 컴포넌트 하나 지만, 다른 NgModule은 컴포넌트를 여러 개 소유할 수 있고, 각 컴포넌트는 라우터나 템플릿의 동작에 따라 뷰에 로드된다
JavaScript Module & NgModul
| 비교 | JS | NgModule |
|---|---|---|
| 모듈 단위 | 파일 | 메타 데이터에 따라 컴파일 되는 클래스 |
| 내보내기-가져오기 | export, import keyword | 메타 데이터의 속성으로 exports, imports 제공 declarations에 등록 되어야 exports 가능 |
| + | 서비스를 프로바이더에 등록 하여 애플리케이션 전체를 확장 가능 |
자주 사용되는 NgModule
| NgModule | 위치 | 용도 |
|---|---|---|
| BrowserModule | @angular/platform-browser | 브라우저에서 애플리케이션을 실행 |
| CommonModule | @angular/common | NgIf, NgFor 등의 구조 디렉티브 사용 |
| FormModule | @angular/forms | 템플릿 기반의 폼 사용 (NgModel 포함) |
| ReactiveFormsModule | @angular/forms | 반응형 폼 사용 |
| RouterModule | @angular/router | RouterLink, forRoot(), forChild() 사용 |
| HttpClientModule | @angular/common/http | 서버와 HTTP 통신 |
