sharingStorage

Angular app.module.ts 본문

Front-End/Angular

Angular app.module.ts

Anstrengung 2022. 1. 26. 17:51

@NgModule

NgModule이란 @NgModule 데코레이터가 지정된 클래스이며 이것은 모듈에 있는 컴포넌트 템플릿이 어떻게 컴파일 되는지 인젝터를 어떻게 생성할지 등을 설정한다.

angular 애플리케이션이 모두 하나 이상 가지고 있으며 Angular 프레임워크가 제공하는 기능을 불러와서 사용할 수 있게 하는 것들을 말한다.

 

Angular 프로젝트에서 app.module.ts는 Component를 관리해주는 역할을 한다고 볼 수 있다.

declarations - 이 모듈에서 사용 가능한 뷰 클래스를 정의한다. angular에서는 component, directive, pipe 세 종류가 존재한다.  모듈에 선언된 구성요소는 모듈 내에서만 사용가능

exports - 다른 모듈이나 컴포넌트에서 접근할 수 있도록 선언한다. 여기서 선언하지 않는다면 이 모듈이 컴포넌트를 포함하고 있더라도 다른 모듈이나 컴포넌트에서 사용할 수 없다.

imports - 다른 모듈을 포함시킬 때 사용한다. 

providers - 전역의 서비스를 해당 객체에서 사용할 수 있더록 지정한다. 서비스(Injectable object)의 리스트를 선언

bootstrap - 루트 모듈에만 존재하는 프로퍼티로 메인 어플리케이션의 뷰를 선언한다. 가장 처음 실행되는 모듈이다

declarations와 imports의 차이점은 

declarations는 사용자가 만든 클래스를 다른 파일에서 사용할 수 있게끔 선언하는 것이고

imports는 angular모듈에서 사용되는 클래스를 다른파일에서 사용할 수 있게끔 선언한다.

 

 

라이브러리 모듈의 주요 구성요소

 

  • @angular/common: 파이프, 디렉티브 관렴 모듈
  • @angular/core: 주요 데코레이터 및 핵심 모듈
  • @angular/forms: 폼 관련 디렉티브 및 모듈
  • @angular/http: HTTP 통신과 관련된 모듈
  • @angular/platform-browser: 브라우저 모듈
  • @angular/router: 라우터 관련 디렉티브 및 모듈
  • @angular/testing: 테스팅 관련 모듈

 

BrowserModule

BrowserModule은 CommonModule을 내부에서 import한다. 따라서 BrowserModule을 import하면 별도의 추가적인 import없이 CommonModule의 NgIf, NgFor같은 빌트인 디렉티브와 파이프를 사용가능하다.

루트모듈을 제외한 다른 모듈은 CommonModule을 별도로 import하여 사용해야한다.

예를 들어, NgModel을 사용하려면 FormsModule을 improt 하고 HttpClient를 사용하려면 HttpClientModule을 import 하면 됩니다.

 

CommonModule

CommonModule은 ngIf, NgClass, NgFor, NgSwitch등을 제공함 새로운 앱을 만들 때 자동적으로 포함되는 BrowserModule에 의해 export 된다.

 

FormsModule

템플릿 기반 폼에 필요한 provider와 directive를 가져온다.

양방향 바인딩에 필요한 NgModel과 NgForm등을 사용할 수 있다.

 

HttpClientModule

XSRF 서비스를 지원하며 HttpClient에 대한 의존성 주입으로 구성된다. 서버와 HTTP통신을 해야할 때 사용

 

ReactiveFormsModule

반응형 폼을 사용할 때 사용

 

RouterModule

RouterLink, .forRoot(), .forChild()를 사용할 때 사용

 

 

 



 

 

-Reference----------------------------------------------------------------------------------------------------------------------------

https://myjamong.tistory.com/26  

 https://freestrokes.tistory.com/97 [FREESTROKES DEVLOG]

 

 

 

'Front-End > Angular' 카테고리의 다른 글

Angular 새로고침 방법  (0) 2022.04.18
Angular Directive  (0) 2022.01.27
생명주기후크 ngOnInit()  (0) 2022.01.26
Angular 부모 자식 컴포넌트끼리 데이터 공유 @Input(), @Output()  (0) 2022.01.18
Angular Architecture 개요  (0) 2022.01.13
'Front-End/Angular' Related Articles more
Comments