Angular의 모듈(NgModule)과 모듈 로딩 지연에 대한 간략한 설명-JS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2021-06-21 10:34:44

앞으로

1848명이 탐색했습니다.

이 글에서는 지연 로딩 모듈인 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< /code> <strong></strong></h2><p>지연 로딩 feature3 모듈 생성(지연 로딩 모듈, 다음 장 참조): <code>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 &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;

const routes: Routes = [
  {
    path: &#39;feature3&#39;,
    loadChildren: () =>
      import(&#39;./feature3/feature3.module&#39;).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。