Angulaire 2 - Modules

Les modules sont utilisés dans Angular JS pour définir des limites logiques dans votre application. Par conséquent, au lieu de tout coder dans une seule application, vous pouvez à la place tout construire dans des modules séparés pour séparer les fonctionnalités de votre application. Inspectons le code qui est ajouté à l'application de démonstration.

Dans le code Visual Studio, accédez au dossier app.module.ts dans votre dossier d'application. Ceci est connu comme la classe de module racine.

Le code suivant sera présent dans le app.module.ts fichier.

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

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

Passons en revue chaque ligne du code en détail.

  • L'instruction import est utilisée pour importer des fonctionnalités à partir des modules existants. Ainsi, les 3 premières instructions sont utilisées pour importer les modules NgModule, BrowserModule et AppComponent dans ce module.

  • Le décorateur NgModule est utilisé pour définir ultérieurement les options d'importation, de déclaration et d'amorçage.

  • Le BrowserModule est requis par défaut pour toute application angulaire basée sur le Web.

  • L'option bootstrap indique à Angular quel composant démarrer dans l'application.

Un module est composé des éléments suivants -

  • Bootstrap array- Ceci est utilisé pour indiquer à Angular JS quels composants doivent être chargés afin que ses fonctionnalités soient accessibles dans l'application. Une fois que vous avez inclus le composant dans le tableau d'amorçage, vous devez les déclarer afin qu'ils puissent être utilisés sur d'autres composants de l'application Angular JS.

  • Export array - Ceci est utilisé pour exporter des composants, des directives et des tubes qui peuvent ensuite être utilisés dans d'autres modules.

  • Import array - Tout comme le tableau d'exportation, le tableau d'importation peut être utilisé pour importer les fonctionnalités d'autres modules Angular JS.