import { ModuleWithProviders } from '@angular/core'이 코드 줄은 Angular에서 중요한 역할을 하며 모듈 ModuleWithProviders의 유형을 소개합니다 @angular/core. 이 코드 줄의 기능을 더 잘 이해하려면 Angular의 모듈 개념과 ModuleWithProviders유형 사용 방법을 자세히 살펴봐야 합니다.
각도 모듈 배경
Angular에서 모듈은 애플리케이션 코드를 구성하고 관리하는 방법입니다. 이는 애플리케이션을 각각 고유한 구성 요소, 서비스 및 기타 기능을 포함하는 논리적으로 관련된 여러 부분으로 분할하는 데 도움이 됩니다. Angular 모듈에는 루트 모듈과 기능 모듈이라는 두 가지 주요 유형이 있습니다.
-
루트 모듈은 응용 프로그램의 진입점이며 일반적으로
app.module.ts파일에 정의됩니다. 애플리케이션을 부트스트래핑하고 다른 모듈을 가져오는 것은 물론 애플리케이션의 전역 구성을 설정하는 일도 담당합니다. -
기능 모듈은 애플리케이션의 다양한 기능을 구성하고 관리하는 데 사용되는 기능 모듈입니다. 각 기능 모듈에는 자체 구성 요소, 지시문, 서비스 등이 포함될 수 있습니다.
Angular의 모듈 시스템을 사용하면 애플리케이션의 다양한 부분을 모듈로 구성하고 캡슐화하여 코드를 보다 유지 관리하고 확장 가능하게 만들 수 있습니다.
ModuleWithProviders유형의 역할
ModuleWithProviders이는 모듈 구성 및 서비스 공급자 등록을 처리하는 데 사용되는 Angular의 중요한 개념입니다. 이 유형은 일반적으로 모듈 메소드와 함께 사용됩니다 forRoot. 그 역할을 자세히 설명하기 위해 다음 예를 분석해 보겠습니다.
import {
NgModule, ModuleWithProviders } from '@angular/core';
import {
CommonModule } from '@angular/common';
import {
UserService } from './user.service';
@NgModule({
imports: [CommonModule],
providers: [UserService]
})
export class UserModule {
static forRoot(): ModuleWithProviders<UserModule> {
return {
ngModule: UserModule,
providers: [UserService]
};
}
}
이 예에서는 UserModule사용자 관련 기능을 담당하는 기능 모듈을 만들었습니다. 이 코드의 기능을 자세히 설명하겠습니다.
-
NgModule우리는 및ModuleWithProviders유형뿐만 아니라 몇 가지 다른 Angular 모듈 및 서비스를 가져오는 것으로 시작했습니다 . -
에서는 데코레이터를 사용하여 모듈을 정의합니다
UserModule.@NgModule여기서는 모듈 공급자를 가져CommonModule오고 등록합니다.UserService -
다음으로 정적 메소드를 정의합니다
forRoot. 이 방법은 일반적으로 루트 모듈에서 기능 모듈을 가져올 때 모듈을 구성하고 서비스를 제공하는 데 사용됩니다. -
이 메서드 에서는
forRoot두 가지 속성이 포함된 개체를 반환했습니다.ngModule: 가져올 모듈을 지정합니다. 여기서는 그UserModule자체입니다.providers: 여기에서 루트 모듈에 등록할 서비스 제공자를 지정합니다UserService.
이제 루트 모듈에서 이를 사용하는 방법을 살펴보겠습니다 UserModule.
import {
NgModule } from '@angular/core';
import {
BrowserModule } from '@angular/platform-browser';
import {
UserModule } from './user/user.module';
@NgModule({
imports: [BrowserModule, UserModule.forRoot()]
})
export class AppModule {
}
루트 모듈에서는 메서드를 사용하여 AppModule가져 오고 구성했습니다 . 이렇게 하면 애플리케이션 전체에서 루트 공급자로 등록되고 다른 모듈에 반복적으로 등록되지 않습니다.UserModuleforRootUserService
이것이 ModuleWithProviders유형의 주요 역할입니다. 기능 모듈에서 구성 및 서비스 제공자를 정의하고 이를 루트 모듈에 한 번 등록하여 글로벌 구성 및 서비스 제공자의 고유성을 보장할 수 있습니다.
더 많은 예
의 역할을 더 자세히 설명하기 위해 ModuleWithProviders또 다른 예를 살펴보겠습니다. SettingsModule애플리케이션 설정을 처리하는 기능 모듈이 있다고 가정해 보겠습니다 . 모듈은 일부 전역 구성 옵션을 수신해야 할 수도 있습니다. 다음을 사용하여 이를 달성 할 수 있습니다 ModuleWithProviders.
import {
NgModule, ModuleWithProviders } from '@angular/core';
import {
CommonModule } from '@angular/common';
import {
SettingsService, SettingsConfig } from './settings.service';
@NgModule({
imports: [CommonModule]
})
export class SettingsModule {
static forRoot(config: SettingsConfig): ModuleWithProviders<SettingsModule> {
return {
ngModule: SettingsModule,
providers: [
SettingsService,
{
provide: SettingsConfig, useValue: config }
]
};
}
}
SettingsModule이 예에서는 애플리케이션 설정을 처리하는 모듈을 만듭니다 . 애플리케이션에 대한 전역 구성 옵션이 포함된 매개변수를 forRoot허용하는 메서드를 정의합니다 .config
이 메서드 에서는 forRoot다음 두 가지 속성을 가진 객체를 반환합니다.
ngModule: 가져올 모듈을 지정합니다. 여기서는 그SettingsModule자체입니다.providers: 루트 모듈에 등록할 서비스 제공자를 지정합니다. 우리는 값이 인 공급자를 등록SettingsService하고{ provide: SettingsConfig, useValue: config }등록했습니다 .config이러한 방식으로 애플리케이션 전체에서 전역 구성 옵션을 사용할 수 있습니다.
SettingsModule다음과 같이 루트 모듈에서 사용하십시오 .
import {
NgModule } from '@angular/core';
import {
BrowserModule } from '@angular/platform-browser';
import {
SettingsModule } from './settings/settings.module';
import {
AppSettings } from './settings/app-settings';
@NgModule({
imports: [
BrowserModule,
SettingsModule.forRoot({
theme: 'light',
language: 'en'
})
],
providers: [AppSettings]
})
export class AppModule {
}
루트 모듈에서는 이를 구성하기 위한 메소드를 가져오고 SettingsModule사용하여 전역 구성 옵션이 포함된 객체를 전달합니다. forRoot이렇게 하면 AppSettings서비스에서 이러한 구성 옵션을 사용할 수 있습니다.
요약하다
import { ModuleWithProviders } from '@angular/core'이 코드 줄은 ModuleWithProvidersAngular에서 모듈을 구성하고 글로벌 서비스 공급자를 등록하는 데 사용되는 유형을 소개합니다. 이를 통해 ModuleWithProviders기능 모듈에서 구성 및 서비스 공급자를 정의하고 이를 루트 모듈에 한 번 등록하여 전역 구성 및 서비스 공급자 고유성을 보장할 수 있습니다.
이 패턴은 코드의 유지 관리성과 확장성을 향상시키는 동시에 Angular 애플리케이션의 기능 모듈을 더 잘 구성하고 관리할 수 있도록 해줍니다. 올바르게 사용하면 ModuleWithProviders유연한 구성과 글로벌 서비스 제공업체 등록을 달성할 수 있어 애플리케이션을 더 쉽게 확장하고 유지 관리할 수 있습니다.