Angular의 모듈(NgModule)과 모듈 로딩 지연에 대한 간략한 설명

이 글에서는 지연 로딩 모듈인 Angular의 모듈(NgModule)을 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

환경:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm: 6.14.6
• IDE: Visual Studio Code

1. 요약

모듈(NgModule)은 Angular의 핵심 개념 중 하나입니다. 모듈(NgModule)은 비즈니스 코드를 구성하고 자체 비즈니스 시나리오에 따라 구성 요소, 서비스 및 경로를 모듈로 패키지하는 데 사용됩니다. [관련 튜토리얼 추천: "angular Tutorial"]

모듈(NgModule)의 주요 기능:

• NgModule은 비즈니스 코드를 정리합니다. 개발자는 NgModule을 사용하여 밀접하게 관련된 구성 요소를 함께 정리할 수 있습니다.

• NgModule은 구성 요소, 지침, 파이프 등의 가시성을 제어하는 ​​데 사용됩니다. 동일한 NgModule의 구성 요소는 기본적으로 서로 볼 수 있지만 외부 구성 요소의 경우 NgModule에서 내보낸 콘텐츠만 볼 수 있습니다. 이러한 방식으로 캡슐화가 달성되고 노출하려는 구성 요소와 서비스만 호출자에게 노출됩니다.

• NgModule은 @angular/cli에서 패키지로 제공하는 가장 작은 단위입니다. 패키징할 때 @angular/cli는 모든 @NgModule 및 라우팅 구성을 확인합니다. 비동기 모듈을 구성하면 cli는 자동으로 모듈을 독립된 청크로 분할합니다. Angular에서 패키징 및 분할 작업은 @angular/cli에 의해 자동으로 처리되며 사용자 개입이 필요하지 않습니다. 물론 필요하다면 각도의 컴파일 구성을 수정하고, Webpack 기반 환경을 구성하고, 패키징 규칙을 사용자 정의할 수도 있습니다.

• NgModule은 라우터가 비동기적으로 로드할 수 있는 가장 작은 단위입니다. 라우터가 로드할 수 있는 가장 작은 단위는 구성 요소가 아니라 모듈입니다. 물론 모듈에 하나의 구성 요소만 넣을 수도 있습니다.

2. NgModule 예제 및 설명

앞서 언급했듯이 Angular의 모든 구성 요소나 서비스는 NgModule에 속해야 합니다. 따라서 AngularCLI에서 생성된 프레임워크 프로그램을 사용하면 자동으로 생성된 구성 요소도 구성 요소에 속하며 시작 모듈로 표시됩니다.
이러한 방식으로 각도 사이트가 시작된 후 이 모듈이 진입점으로 사용되고 각 모듈은 구성에 따라 로드됩니다.

다음은 설명을 위한 예로 기본 생성된 시작 모듈을 사용합니다.

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

• 선언, 구성요소, 명령어 및 파이프 선언을 배치하는 데 사용됨
• imports, 외부 모듈을 가져오는 데 사용됨. 예를 들어, 현재 모듈이 다른 모듈의 구성 요소를 호출해야 하는 경우 여기에 추가해야 합니다. 예를 들어 위의 예에서는 Browser와 Routing이라는 두 개의 모듈을 가져옵니다.
• 공급자, 타사 서비스 또는 사용해야 하는 기타 모듈이 여기에 배치됩니다.
• bootstrap은 시작 구성 요소를 정의합니다. 시작 가능한 Angular 프로젝트(단지 라이브러리인 경우 제외)는 시작 구성 요소를 정의해야 합니다.
• 내보내기, 선언된 구성 요소, 지시문 및 파이프는 이 모듈을 가져오는 모듈 아래의 모든 구성 요소 템플릿에서 사용할 수 있습니다. 이렇게 내보낸 선언 가능한 개체는 모듈의 공개 API입니다. 즉, 다른 모듈이 이 모듈에 정의된 내용을 사용하려면 여기에서 선언해야 합니다.
• entryComponents, 다른 모듈이 이 모듈의 구성 요소를 뷰에 동적으로 로드하려는 경우 이러한 구성 요소를 EntryComponents에 작성해야 합니다.

3. Angular CLI 생성 모듈

AngularCLI는 모듈 생성을 포함하여 많은 기본 코드와 파일을 생성하는 데 도움을 주고 매개변수를 지정할 수 있는 매우 훌륭하고 강력한 도구 세트입니다.

ng generate module <name> [options]

자세한 사항은 https://angular.io/cli/generate#module을 참고해주세요.

몇 가지 간단한 예:

• feature1 모듈 생성: ng generate module feature1ng generate module feature1

• 创建feature2模块， 并且带路由：ng generate module feature2 --routing

• 创建一个延迟加载的feature3模块(延迟加载模块，参考下面章节)： ng generate module feature3 --route feature3 --module app.module

说明： ng generate module xxx 可以简写为 ng g m xxx

라우팅을 사용하여 feature2 모듈 생성: ng generate module feature2 --routing <strong></strong>

지연 로딩 feature3 모듈 생성(지연 로딩 모듈, 다음 장 참조): ng generate module feature3 --route feature3 --module app.module

🎜🎜🎜🎜 설명: ng generate module xxx는 ng g m xxx🎜🎜🎜🎜4로 축약될 수 있습니다. 지연 로딩 모듈🎜🎜🎜지연 로딩은 시작 시 애플리케이션이 로드되는 것을 방지합니다. 그러나 라우팅 구성과 결합하면 필요할 때 해당 모듈이 동적으로 로드됩니다. 이러한 방식으로 Angular는 요청이 있을 때까지 첫 번째 인터페이스의 서버에서 모든 파일을 다운로드한 다음 해당 모듈을 다운로드할 필요가 없습니다. 이는 성능에 큰 도움이 되고 스크롤 없이 볼 수 있는 부분의 초기 다운로드 파일 크기를 줄이는 데 도움이 되며 설정도 쉽습니다. 🎜

举例来说，上文创建了3个模块，主程序模块以及feature1、feature2会被打成一个包（js），feature3会被单独打一个包（js），当用户访问/feature3/* 的地址后，才会加载feature3这个包（js），否则永远不会请求、加载feature3的模块，从而提高性能（首页加载时间）。当一个项目大到一定程度时，最好考虑把某些模块设置为延迟加载模块。

延迟加载的路由定义（angular CLI会自动生成）：

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature3',
    loadChildren: () =>
      import('./feature3/feature3.module').then((m) => m.Feature3Module),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

最后复习一下生成延迟加载模块的命令ng generate module feature3 --route feature3 --module app.module，或者简写为 ng g m feature3 --route feature3 --module app.module。

5. 总结

• Angular项目，就是模块（NgModule）的一个集合，任组件、服务等必须包含在一个模块中。

• 延迟加载模块用于提高首页加载性能。

• Angular CLI命令，生成模块。

更多编程相关知识，请访问：编程视频！！

위 내용은 Angular의 모듈(NgModule)과 모듈 로딩 지연에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!