각도 모듈 - 기초

Angular는 풍부한 UI와 고성능 웹 애플리케이션을 구축하기 위한 인기 있는 프레임워크입니다. 또한 코드 구조에서 매우 독단적이며, 이는 프레임워크가 "각도의 방식"으로 수행되는 것을 선호한다는 것을 의미합니다. 이것의 일부는 애플리케이션/라이브러리에 Angular 모듈을 포함하는 것을 의미합니다. 그러나 모듈이란 정확히 무엇입니까? 🤔🤔🤔

모듈

Angular 모듈은 단순히 개별 논리 조각과 구성 요소를 하나의 우산 아래 그룹화하는 방법입니다. 모든 Angular 애플리케이션에 있는 가장 일반적인 모듈인 AppModule을 살펴보겠습니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

이 클래스를 모듈로 준비하도록 Angular에 지시하는 @NgModule 데코레이터가 있습니다.
데코레이터는 모듈을 사용자 정의하는 객체를 허용합니다.

bootstrap 옵션은 Angular가 나머지 애플리케이션을 로드하는 진입점을 지정하기 때문에 AppModule에만 해당됩니다.

declarations 배열은 이 모듈에 포함된 내용을 보여줍니다. 구성 요소, 파이프 및 지시문이 여기에 나열되어 있으며 이 모듈 내에서 사용할 수 있으며 서로 상호 작용할 수 있습니다. 예를 들어 AppModule이 다음과 같은 경우:

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, TestOneComponent, TestTwoComponent],
  providers: [],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

그런 다음 app.component.html 내부에서 다음과 같은 것을 가질 수 있습니다.

<app-test-one> </app-test-one>
<app-test-two> </app-test-two>

이는 이 두 구성 요소가 AppModule에서 선언되어 사용할 수 있게 되었기 때문입니다. 일반적으로 declarations의 AppModule 배열에 넣은 것은 무엇이든 전역적으로 사용할 수 있게 됩니다.

imports 및 exports 배열은 이 배열에 연결된 다른 모듈을 알려줍니다. 레고 블록처럼 모듈을 함께 구성할 수 있습니다. 예를 들어:

@NgModule({
  imports:      [ CommonModule ],
  declarations: [ FirstComponent, SecondComponent ],
  providers: [],
  exports: [FirstComponent]
})
export class FirstModule { }

@NgModule({
  imports:      [ CommonModule, FirstModule ],
  declarations: [],
  providers: [],
})
export class SecondModule { }

일반적으로 이러한 모듈은 다른 파일에 있지만 예를 들어 서로 옆에 있습니다. 우리는 그것을 볼 수 있습니다:

FirstModule FirstComponent라는 구성 요소를 내보냅니다.

SecondModule 수입 FirstModule . 이것은 FirstComponent 를 SecondModule 내부에서 사용할 수 있음을 의미합니다.

또한 FirstModule에는 SecondComponent라는 다른 구성 요소가 있지만 내보내지지는 않습니다. 이는 가져오는 다른 모듈에서 사용할 수 없음을 의미합니다FirstModule.

providers 배열을 사용하면 모듈과 관련된 코드에 나타나는 모든 위치에 기본 또는 대체 값, 클래스 등을 삽입할 수 있습니다. 예를 들어 보면 훨씬 더 명확합니다.

Angular Material Components에는 많은 기본값이 있지만 Material Components를 가져온 모듈의 providers 배열을 사용하여 이러한 기본값을 변경할 수 있습니다.

@NgModule({
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatExpansionModule
  ],
  declarations: [ AppComponent ],
  providers: [
     { 
      provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
      useValue: {
        collapsedHeight: '64px',
        expandedHeight: '80px'
      }
    }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

위의 예에서 Angular Material에 <mat-expansion-panel>에 대해 설정된 기본값을 무시하고 우리가 제공한 구성을 적용하도록 지시합니다. 이는 이 모듈에 사용된 모든 확장 패널에 영향을 미칩니다.

결론

Angular Module이 무엇인지, Angular Module을 구성하는 기본 부분에 대해 다루었습니다. 이 기사가 도움이 되었고 모듈을 조금 더 이해했으면 합니다.

Angular Modules에서 다루어야 할 다른 주제들이 많이 있으며 저는 그것들을 모두 다루는 것을 목표로 합니다. 그럼 계속 지켜봐주시고 읽어주셔서 감사합니다! ❤️