Une brève discussion sur les modules (NgModule) dans Angular et le chargement retardé des modules

Cet article vous présentera le module (NgModule) dans Angular et le module de chargement paresseux. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Environnement :

• CLI angulaire : 11.0.6
• Angulaire : 11.0.7
• Nœud : 12.18.3
• npm : 6.14.6
• IDE : Visual Studio Code

Résumé1.

Module (NgModule) est l'un des concepts fondamentaux d'Angular. Les modules (NgModule) sont utilisés pour organiser les codes commerciaux et regrouper les composants, les services et les itinéraires en modules en fonction de leurs propres scénarios commerciaux. [Recommandations de tutoriel associées : "tutoriel angulaire"] Le rôle principal du module

(NgModule) :

• NgModule organise le code métier, les développeurs peut utiliser NgModule pour organiser ensemble des composants étroitement liés.

• NgModule est utilisé pour contrôler la visibilité des composants, des instructions, des tuyaux, etc. Les composants d'un même NgModule sont visibles les uns aux autres par défaut, tandis que pour les composants externes, seul NgModule est visible Le contenu des exportations. De cette manière, l'encapsulation est réalisée et seuls les composants et services que vous souhaitez exposer sont exposés à l'appelant.

• NgModule est la plus petite unité emballée par @angular/cli. Lors de l'empaquetage, @angular/cli vérifiera toutes les configurations @NgModule et de routage. Si vous configurez un module asynchrone, cli divisera automatiquement le module en morceaux indépendants. Dans Angular, les actions de packaging et de fractionnement sont automatiquement gérées par @angular/cli et ne nécessitent pas votre intervention. Bien entendu, si nécessaire, vous pouvez également modifier la configuration de compilation d'angular, configurer un environnement basé sur Webpack et personnaliser les règles de packaging.

• NgModule est la plus petite unité que le routeur peut charger de manière asynchrone. La plus petite unité que le routeur peut charger est un module, pas un composant. Bien entendu, vous pouvez également mettre un seul composant dans un module.

2. Exemples et explications de NgModule

Comme mentionné ci-dessus, tout composant ou service dans Angular doit appartenir à un NgModule. Par conséquent, en utilisant le programme-cadre généré par AngularCLI, le composant généré automatiquement appartient également à un composant et est marqué comme module de démarrage.
De cette façon, après le démarrage du site angulaire, ce module sera utilisé comme point d'entrée et chaque module sera chargé selon la configuration.

Ce qui suit prend le module de démarrage généré par défaut comme exemple d'explication :

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

• déclarations, utilisées pour placer des déclarations de composants, d'instructions et de pipelines
• ; importations, utilisé pour importer des modules externes. Par exemple, si le module actuel doit appeler des composants d'autres modules, il doit être ajouté ici. Par exemple, dans l'exemple ci-dessus, deux modules, Navigateur et Routage, sont importés.
• les fournisseurs, les services de tiers ou d'autres modules qui doivent être utilisés sont placés ici ;
• bootstrap, définit le composant de démarrage. Un projet Angular démarrable (sauf s'il s'agit simplement d'une bibliothèque) doit définir un composant de démarrage.
• exports, les composants, directives et tuyaux déclarés peuvent être utilisés dans le modèle de n'importe quel composant sous le module qui importe ce module. Ces objets déclarables exportés sont l'API publique du module. Autrement dit, si d'autres modules souhaitent utiliser le contenu défini dans ce module, ils doivent le déclarer ici.
• entryComponents. Si d'autres modules souhaitent charger dynamiquement des composants de ce module dans la vue, alors ces composants doivent être écrits dans EntryComponents.

3. Module de génération de CLI angulaire

AngularCLI est un ensemble d'outils très performant et puissant qui peut nous aider à générer de nombreux codes et fichiers de base, notamment créer un module et peut spécifier des paramètres.

ng generate module <name> [options]

Pour plus de détails, veuillez vous référer à https://angular.io/cli/generate#module.

Quelques exemples simples :

• Créer un module feature1 : ng generate module feature1

• Créer un module feature2 avec routage : ng generate module feature2 --routing

• Créer un module feature3 à chargement différé (module à chargement différé, reportez-vous au chapitre suivant) : ng generate module feature3 --route feature3 --module app.module

Description : ng generate module xxx peut être abrégé en ng g m xxx

4. Module de chargement paresseux

Le chargement paresseux empêche le chargement de l'application au démarrage, mais combiné à la configuration de routage, le module correspondant est chargé dynamiquement en cas de besoin. De cette façon, Angular n'a pas besoin de télécharger tous les fichiers du serveur sur la première interface jusqu'à ce que cela soit demandé, puis télécharge le module correspondant. Cela améliore énormément les performances et réduit la taille initiale du fichier de téléchargement au-dessus de la ligne de flottaison, et il peut être facilement configuré.

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!