Comprendre la différence entre un module JavaScript et un module Angular

Le terme “module” ne désigne pas la même chose selon qu’il s’applique au langage JavaScript ou au framework Angular. Quelle est la différence exactement ?

Comparaison module JavaScript et module Angular

Module JavaScript (ES6) Module Angular (NgModule)
Vient de Langage JavaScript ES6 / TypeScript Framework Angular
Utilisable où ? Dans n'importe quelle appli ES6/TypeScript Dans une appli Angular uniquement
Définition Fichier dont le code a un scope privé Classe décorée avec @NgModule
Utilité Éviter le scope global
Rendre les dépendances de code explicites
Encapsuler les fonctionnalités
Organiser le code de l'appli
Syntaxe d'export export const a = 'foo';
@NgModule({
  exports: [ NavbarComponent ]
})
Syntaxe d'import import { a } from './fichier-a';
@NgModule({
  imports: [ SharedModule ]
})

Qu’est-ce qu’un module JavaScript (ES6) ?

Un module JavaScript est une fonctionnalité du langage JavaScript, disponible à partir de ES6 et également dans Typescript. Il désigne un fichier dont le code a un scope privé.

Les symboles déclarés dans un module ne sont pas accessibles depuis les autres modules, à moins de les exporter explicitement en les précédant du mot-clé export. Par ailleurs, les modules qui souhaitent accéder aux symboles exportés doivent les importer avec le mot-clé import.

Ici, le module fichier-a.ts exporte la variable firstName, mais pas la variable lastName :

// fichier-a.ts
export const firstName = 'James';  // Accessible depuis les autres modules, car exportée
const lastName = 'Bond';           // Pas accessible depuis les autres modules

Cet autre module (fichier-b.ts) importe la variable firstName et peut ensuite l’utiliser :

// fichier-b.ts
import { firstName } from './fichier-a';

console.log(firstName);

Notez que la variable lastName n’est pas importable, car pas exportée de son module d’origine :

// fichier-b.ts
import { lastName } from './fichier-a';  // ERREUR

Qu’est-ce qu’un module Angular (NgModule) ?

Un module Angular est une fonctionnalité du framework Angular. Il désigne une classe décorée avec @NgModule. On utilise d’ailleurs parfois le terme de “NgModule” pour désigner un module Angular et éviter la confusion avec un module JavaScript.

Un module Angular est un registre qui référence les différentes briques de code de l’application (composants, directives, pipes, services…). Une application Angular est souvent découpée en plusieurs NgModules, chacun centré sur une fonctionnalité précise. Un NgModule peut accéder aux fonctionnalités d’un autre en l’important via la propriété @NgModule.imports. Un NgModule peut exposer certains de ses composants/directives/pipes aux autres en les exportant via la propriété @NgModule.exports.

Ici, le NgModule SharedModule exporte un composant réutilisable NavbarComponent :

@NgModule({
  declarations: [ NavbarComponent ],
  exports: [ NavbarComponent ]
}
export class SharedModule {}

Le NgModule AppModule importe le SharedModule et peut ensuite utiliser son composant exporté NavbarComponent :

@NgModule({
  imports: [ BrowserModule, SharedModule ],
  ...
}
export class AppModule {}
Informations

Tags : es6typescriptngmodule

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne