En utilisant des ngodules angulaires pour le code réutilisable et plus

ngodules angulaires: une plongée profonde dans l'organisation des applications et le chargement paresseux

Les

ngmodules sont fondamentaux pour les applications angulaires et structurées et la compilation de rationalisation. Ils sont cruciaux pour l'organisation des fonctionnalités, les itinéraires de chargement paresseux et la construction de bibliothèques réutilisables. Ce guide suppose les connaissances angulaires de base.

Concepts clés:

• Organisation: ngmodules Diviser les applications en blocs fonctionnels gérables, améliorer la maintenabilité et la lisibilité du code.
• Contexte de compilation: Ils fournissent un contexte pour les composants, assurant une bonne résolution de regroupement et de dépendance.
• Modules de caractéristiques: Au-delà de la racine AppModule, les modules de caractéristiques encapsulent les caractéristiques de l'application spécifiques, favorisant la modularité.
• Chargement paresseux: Cette technique d'optimisation des performances charge des modules uniquement en cas de besoin, améliorant les temps de chargement initiaux. Il est implémenté à l'aide du routeur et des modules de fonctionnalité.
• Groupement des modules: Les ngodules peuvent regrouper d'autres Ngmodules, simplifiant les importations, mais potentiellement entravant les optimisations de tremblement d'arbres.

ngmodules vs modules javascript:

Il est important de distinguer les modules NgModules et JavaScript (ES6). Les modules JavaScript sont une fonctionnalité linguistique pour l'organisation de code utilisant import et export, gérant la portée et la réutilisabilité. Dans les projets angulaires utilisant TypeScript, import / export Les instructions sont gérées sous forme de modules JavaScript. Cet article utilise les noms complets pour maintenir la clarté.

le AppModule - la fondation:

Chaque application angulaire commence par un AppModule. C'est le module racine, en constante évolution de l'application. Un exemple de base:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

Le décorateur @NgModule fournit des métadonnées pour le compilateur. Le tableau bootstrap spécifie le composant racine (AppComponent).

Propriétés ngmodules:

Le décorateur @NgModule accepte plusieurs propriétés:

• declarations: répertorie les composants, les directives et les tuyaux définis dans ce module. Ceux-ci sont privés à moins d'exporter explicitement.
• imports: répertorie les modules externes Ce module dépend de .
• exports: répertorie les composants, les directives et les tuyaux mis à disposition pour les modules importation de celui-ci.
• providers: Répertorie les services fournis par ce module. La portée est importante; Les fournisseurs dans les modules à chargement paresseux ne sont accessibles que dans ce module.
• entryComponents: Composants chargés dynamiquement au moment de l'exécution.
• bootstrap: (module racine uniquement) Spécifie le composant racine à bootstrap.
• schemas: Contrôle la gestion des erreurs de compilation du modèle (par exemple, NO_ERRORS_SCHEMA).
• id: Un ID unique pour le module (rarement utilisé).

ngmodule Exemples:

1. Caractéristique ngmodules:

Les modules de caractéristiques encapsulent les composants et services associés. Exemple:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

Ce module exporte ForumsComponent, ce qui le rend accessible à d'autres modules. Les fournisseurs déclarés ici sont étendus dans ce module. CommonModule (contenant les directives de base) remplace BrowserModule (utilisé uniquement dans le module racine).

pour utiliser ForumsModule, importez-le dans AppModule:

@NgModule({
  declarations: [ForumComponent, ForumsComponent, ThreadComponent, ThreadsComponent],
  imports: [CommonModule, FormsModule],
  exports: [ForumsComponent], // Exposing ForumsComponent for use in other modules
  providers: [ForumsService]
})
export class ForumsModule { }

Génération de modules de fonction à l'aide de la CLI angulaire: ng generate module path/to/module/feature

2. Chargement paresseux avec des itinéraires:

le chargement paresseux améliore les performances en chargeant des modules à la demande. Cela nécessite d'utiliser le routeur et les modules de fonction.

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

Remarque RouterModule.forChild(). In AppModule Configuration de routage de:

@NgModule({
  declarations: [ForumComponent, ForumsComponent],
  imports: [CommonModule, FormsModule, RouterModule.forChild([
    { path: '', component: ForumsComponent },
    { path: ':forum_id', component: ForumComponent }
  ])],
  providers: [ForumsService]
})
export class ForumsModule { }

La propriété loadChildren utilise une fonction qui importe dynamiquement le module. Cela garantit que le module se charge uniquement lorsque l'itinéraire /forums est accessible. Les fournisseurs dans les modules chargés de paresseux sont pas accessibles mondialement.

3. Modules de routage:

Un modèle commun est de créer des modules de routage distincts pour une meilleure organisation. La CLI angulaire peut les générer: ng generate module path/to/module/feature --routing

4. Services singleton:

Pour assurer une seule instance d'un service à travers l'application, utilisez des méthodes forRoot() et forChild() dans votre module:

const routes: Routes = [
  {
    path: 'forums',
    loadChildren: () => import('./forums/forums.module').then(m => m.ForumsModule) // Updated import syntax
  },
  // ...other routes
];

Importer en utilisant ForumsModule.forRoot() dans AppModule et ForumsModule.forChild() dans d'autres modules.

5. Regroupement ngmodules:

Les ngodules peuvent regrouper d'autres ngmodules pour une importation plus facile, mais cela peut avoir un impact sur la partage des arbres.

Résumé:

ngmodules sont essentiels pour l'architecture d'application angulaire. Comprendre leurs propriétés et leurs modèles d'utilisation est la clé de la création d'applications maintenables, performantes et évolutives. Reportez-vous à la documentation angulaire officielle pour plus d'informations approfondies.

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!