Ca y est on sait déjà créer un projet Angular avec ng new, et aussi le lancer et le rendre disponible depuis un navigateur avec ng serve.
Nous allons enfin entrer dans le vif du sujet : on va bientôt écrire notre première page !
Au démarrage, il y avait un Module
Car oui, lorsque l’on commence dans Angular, on découvrir beaucoup de fichiers, et, en fait, on voit que tout tourne autour de deux types de fichiers (à la base) :
- les Modules
- les Components
Retenons qu’un Module contient un ensemble de components.
Ainsi, on peut voir le Module comme un moyen d’organiser ses composants Angular.
Il existe un Module initial : AppModule
Ce module est chargé depuis le main.ts.
Il s’agit du fichier initial d’Angular.
Une fois le AppModule instancié, c’est lié qui va charger l’ensemble des :
- autres Modules
- des Component.
On décortique le Module
Tout d’abord, vous devez importer la possibilité d’avoir des modules :
import { NgModule } from ‘@angular/core’;
Cela vous donnant le droit d’avoir l’attribut : @NgModule !
Voici par exemple le main module :
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Vous y voyez : les declarations, les imports et les providers.
Les declarations
Vous allez pouvoir déclarer les composants, les pipes, …appartenant au Module en cours.
Les imports
Tout sous Module que vous souhaitez charger sera à placer ici.
Les providers
Ici, c’est une des puissances d’Angular : nous avons de l’injection de dépendances !
Nous allons préciser ici les services d’accès à charger.
Note
Il existe une particularité pour le Module AppModule :
Il a un attribut bootstrap : il n’est utilisable que pour le Module de chargement, donc ici AppModule.
On crée un nouveau module
Le angular CLI vous propose une commande pour créer des nouveaux modules de fonctionnalités (regroupant des Components) :
ng generate module TestModule
CREATE src/app/test-module/test-module.module.spec.ts (308 bytes)
CREATE src/app/test-module/test-module.module.ts (194 bytes)
PS ..\repos\tests\angular\testseo3avccss>
______
Vous avez testé la création d’un nouveau module ?