Modules JavaScript vs NgModules

JavaScript et Angular utilisent des modules pour organiser le code, et même s'ils l'organisent différemment, les applications Angular s'appuient sur les deux.

JavaScript modules

En JavaScript, les modules sont des fichiers individuels contenant du code JavaScript. Pour rendre leur contenu disponible, vous écrivez une déclaration d'exportation, généralement après le code correspondant, comme suit :

Ensuite, lorsque vous avez besoin du code de ce fichier dans un autre fichier, vous l'importez comme ceci :

Les modules JavaScript vous aident à créer un espace de noms en évitant les variables globales accidentelles.

NgModules

Les NgModules sont des classes décorées avec @NgModule. Le tableau du décorateur @NgModule indique à Angular les besoins des autres modules NgModules du module actuel. Les modules du tableau imports sont différents des modules JavaScript, car ce sont des NgModules plutôt que des modules JavaScript classiques. Les classes avec un décorateur @NgModule sont, par convention, conservées dans leurs propres fichiers, mais ce qui en fait un NgModule n'est pas dans leur propre fichier, comme les modules JavaScript; c'est la présence de @NgModule et de ses métadonnées.

Le AppModule généré à partir de la CLI Angular illustre les deux types de modules en action :

Les classes NgModule diffèrent du module JavaScript des manières suivantes:

• Un NgModule ne lie que les classes déclarables . Les objets déclarables sont les seules classes qui importent pour le compilateur Angular .
• Au lieu de définir toutes les classes membres dans un fichier géant comme dans un module JavaScript, vous répertoriez les classes du module dans la liste @NgModule.declarations
• Un NgModule ne peut exporter que les classes déclarables qu'il possède ou importer depuis d'autres modules. Il ne déclare ni n'exporte aucun autre type de classe.
• Contrairement aux modules JavaScript, un NgModule peut étendre l'application complète avec des services en ajoutant des fournisseurs à la liste @NgModule.providers.