Eine kurze Diskussion über Module (NgModule) in Angular und verzögertes Laden von Modulen

Dieser Artikel stellt Ihnen das Modul (NgModule) in Angular vor, ein Modul mit verzögertem Laden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Umgebung:

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

1. Zusammenfassung

Module (NgModule) ist eines der Kernkonzepte von Angular. Module (NgModule) werden verwendet, um Geschäftscode zu organisieren und Komponenten, Dienste und Routen entsprechend ihren eigenen Geschäftsszenarien in Module zu packen. [Verwandte Tutorial-Empfehlungen: „angular Tutorial“] Die Hauptfunktion des

-Moduls (NgModule):

• NgModule organisiert Geschäftscode, um eng verwandte Komponenten gemeinsam zu organisieren.

• NgModule wird verwendet, um die Sichtbarkeit von Komponenten, Anweisungen, Pipes usw. zu steuern. Komponenten im selben NgModule sind standardmäßig füreinander sichtbar, während bei externen Komponenten nur der von NgModule exportierte Inhalt sichtbar ist. Auf diese Weise wird eine Kapselung erreicht und dem Aufrufer werden nur die Komponenten und Dienste angezeigt, die Sie verfügbar machen möchten.

• NgModule ist die kleinste von @angular/cli gepackte Einheit. Beim Packen überprüft @angular/cli alle @NgModule- und Routing-Konfigurationen. Wenn Sie ein asynchrones Modul konfigurieren, teilt cli das Modul automatisch in unabhängige Blöcke auf. In Angular werden die Paketierungs- und Aufteilungsaktionen automatisch von @angular/cli durchgeführt und erfordern kein Eingreifen durch Sie. Natürlich können Sie bei Bedarf auch die Kompilierungskonfiguration von Angular ändern, eine Umgebung basierend auf Webpack konfigurieren und Verpackungsregeln anpassen.

• NgModule ist die kleinste Einheit, die der Router asynchron laden kann. Die kleinste Einheit, die der Router laden kann, ist ein Modul, keine Komponente. Natürlich können Sie auch nur eine Komponente in ein Modul stecken.

2. NgModule-Beispiele und Erklärungen

Wie bereits erwähnt, muss jede Komponente oder jeder Dienst in Angular zu einem NgModule gehören. Daher gehört die automatisch generierte Komponente mithilfe des von AngularCLI generierten Rahmenprogramms ebenfalls zu einer Komponente und ist als Startmodul gekennzeichnet.
Auf diese Weise wird dieses Modul nach dem Start der Angular-Site als Einstiegspunkt verwendet und jedes Modul wird entsprechend der Konfiguration geladen.

Im Folgenden wird als Beispiel das standardmäßig generierte Startmodul verwendet:

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

• declarations, zum Platzieren von Deklarationen von Komponenten, Anweisungen und Pipes;
• imports, zum Importieren externer Module. Wenn das aktuelle Modul beispielsweise Komponenten anderer Module aufrufen muss, muss es hier hinzugefügt werden. Im obigen Beispiel werden beispielsweise zwei Module, Browser und Routing, importiert.
• Anbieter, die Dienste Dritter oder andere zu nutzende Module werden hier platziert;
• Bootstrap, definiert die Startup-Komponente. Ein startfähiges Angular-Projekt (außer wenn es nur eine Bibliothek ist) muss eine Startkomponente definieren.
• Exporte, deklarierte Komponenten, Anweisungen und Pipes können in der Vorlage jeder Komponente unter dem Modul verwendet werden, das dieses Modul importiert. Diese exportierten deklarierbaren Objekte sind die öffentliche API des Moduls. Mit anderen Worten: Wenn andere Module den in diesem Modul definierten Inhalt verwenden möchten, müssen sie ihn hier deklarieren.
• EntryComponents: Wenn andere Module Komponenten in diesem Modul dynamisch in die Ansicht laden möchten, müssen diese Komponenten in EntryComponents geschrieben werden.

3. Angular CLI-Generierungsmodul

AngularCLI ist ein sehr gutes und leistungsstarkes Tool-Set, das uns dabei helfen kann, viele grundlegende Codes und Dateien zu generieren, einschließlich der Erstellung eines Moduls, und Parameter angeben kann.

ng generate module <name> [options]

Weitere Informationen finden Sie unter https://angular.io/cli/generate#module.

Ein paar einfache Beispiele:

• Feature1-Modul erstellen: 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-Modul mit Routing erstellen: ng Generate Module Feature2 --routing< /code> <strong></strong></h2><p>Erstellen Sie ein verzögert geladenes Feature3-Modul (Lazy-Loading-Modul, siehe folgendes Kapitel): <code>ng generic module feature3 --route feature3 --module app.module

🎜🎜🎜🎜 Beschreibung: ng generic module xxx kann als ng g m xxx🎜🎜🎜🎜4 abgekürzt werden. In Kombination mit der Routing-Konfiguration wird jedoch das entsprechende Modul bei Bedarf dynamisch geladen. Auf diese Weise muss Angular nicht alle Dateien vom Server auf der ersten Schnittstelle herunterladen, bis sie angefordert werden, und lädt dann das entsprechende Modul herunter. Dies trägt enorm zur Leistung bei, reduziert die anfängliche Dateigröße beim Herunterladen und ist einfach einzurichten. 🎜

举例来说，上文创建了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命令，生成模块。

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

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Module (NgModule) in Angular und verzögertes Laden von Modulen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!