Académique Documents
Professionnel Documents
Culture Documents
Cours Angular Module
Cours Angular Module
Achref El Mouelhi
elmouelhi.achref@gmail.com
1 Création de sous-module
3 Routage de sous-module
Eager loading
Lazy loading
Angular
H I ©
EL
ng generate module module-name
O U
f E LM
ch r e
©A
Angular
H I ©
EL
ng generate module module-name
O U
f E LM
Ou utiliser le raccourci
ch r e
ng g m module-name ©A
Angular
Pour créer un sous-module vehicule (ce dernier ne sera pas
enregistré dans app.module.ts)
ng g m vehicule
H I ©
UEL
O
f E LM
ch r e
©A
Angular
Pour créer un sous-module vehicule (ce dernier ne sera pas
enregistré dans app.module.ts)
ng g m vehicule
H I ©
UEL
O
Pour créer un sous-module vehicule et l’enregistrer dans
app.module.ts
f E LM
ng g m vehicule --module=app
ch r e
©A
Angular
Pour créer un sous-module vehicule (ce dernier ne sera pas
enregistré dans app.module.ts)
ng g m vehicule
H I ©
UEL
O
Pour créer un sous-module vehicule et l’enregistrer dans
app.module.ts
f E LM
ng g m vehicule --module=app
ch r e
©A
Pour créer un sous-module vehicule, l’enregistrer dans
app.module.ts et créer son module de routage (l’ordre des
options n’a pas d’importance)
ng g m vehicule --module=app --routing
H & H: Research and Training 4 / 27
Création de sous-module
Angular
Angular
Angular
Constats
Deux fichiers créés :
H I ©
vehicule.module.ts et
EL
vehicule-routing.module.ts
M OU
Une mise à jour effectuéeE
f L
: enregistrement de ce sous-module
ch
dans app.module.ts r e
A
©--module=app n’a pas été précisée, il faut déclarer
Si l’option
vehicule.module.ts dans app.module.ts
Angular
Pour déclarer vehicule.module.ts dans app.module.ts
import { VehiculeModule } from ’./vehicule/vehicule.module’;
// + les autres imports
@NgModule({
declarations: [
H I ©
AppComponent,
UEL
StagiaireComponent,
O
],
AdresseComponent
f E LM
imports: [
ch r e
©A
BrowserModule,
AppRoutingModule,
VehiculeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular
r e f E
Préciser le nom du module au moment de la création du
ch
©A
composant
Angular
Angular
ch r e
©A
CREATE src/app/modules/vehicule/voiture/voiture.component.html (22 bytes) CREATE
src/app/modules/vehicule/voiture/voiture.component.spec.ts (635 bytes) CREATE
src/app/modules/vehicule/voiture/voiture.component.ts (273 bytes) CREATE
src/app/modules/vehicule/voiture/voiture.component.css (0 bytes) UPDATE
src/app/modules/vehicule/vehicule.module.ts (446 bytes)
Angular
Angular
ch r e
©A
CREATE src/app/modules/vehicule/camion/camion.component.html (21 bytes) CREATE
src/app/modules/vehicule/camion/camion.component.spec.ts (628 bytes) CREATE
src/app/modules/vehicule/camion/camion.component.ts (269 bytes) CREATE
src/app/modules/vehicule/camion/camion.component.css (0 bytes) UPDATE
src/app/modules/vehicule/vehicule.module.ts (364 bytes)
Remarque
Les deux mises à jour effectuées correspondent à la déclaration de ces deux composants dans
vehicule.module.ts
H I ©
EL
import { NgModule } from ’@angular/core’;
import { CommonModule } from ’@angular/common’;
O U
f E LM
import { VehiculeRoutingModule } from ’./vehicule-routing.module’;
import { CamionComponent } from ’./camion/camion.component’;
ch r e
import { VoitureComponent } from ’./voiture/voiture.component’;
@NgModule({
©A
declarations: [CamionComponent, VoitureComponent],
imports: [
CommonModule,
VehiculeRoutingModule
]
})
export class VehiculeModule { }
Angular
Angular
Angular
H I ©
UEL
O
f E LM
ch r e
©A
Angular
H I ©
UEL
O
Explication
f E LM
r e
chsera créé dans: le lemodule
A
vehicule/vehicule-routing
©
vehicule-routing r
de routage appelé
épertoire du module vehicule
Angular
Deux solutions
H I ©
EL
Définir les routes dans app-routing.module.ts
U
M O
f L
Définir une base pour le module dans
E et une route pour chaque composant
app-routing.module.ts
r e
ch vehicule-routing.module.ts
A
de ce module dans
©
Angular
Dans app-routing.module.ts, définissons les routes /vehicule/camion, /vehicule/voiture et /vehicule
©
const routes: Routes = [
{ path: ’stagiaire’, component: StagiaireComponent },
H I
EL
{ path: ’stagiaire/:nom/:prenom’, component: StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent },
{ path: ’trainee’, redirectTo: ’/stagiaire’ },
{ path: ’error’, component: ErrorComponent },
O U
LM
{
path: ’vehicule’, children: [
e f E
{ path: ’camion’, component: CamionComponent },
r
ch
{ path: ’voiture’, component: VoitureComponent },
{ path: ’’, component: VoitureComponent }
©A
]
},
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’ },
{ path: ’**’, redirectTo: ’/error’ }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Angular
r e f E
ch
@NgModule({
©A
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class VehiculeRoutingModule { }
H I ©
U EL
O
f E LM
ch r e
©A
H I ©
EL
export class AppModule {
}
constructor() { console.log(’app-module’); }
O U
f E LM
ch r e
©A
H I ©
EL
export class AppModule {
}
constructor() { console.log(’app-module’); }
O U
f E LM
ch r e
Explication
©A
Allez sur /vehicule/camion et /vehicule/voiture et vérifiez que leurs composants
respectifs s’affichent
Allez aussi les routes précédentes (/adresse par exemple) et vérifier que dans tous les
cas les deux messages app-module et vehicule-module sont affichés dans la
console.
Angular
Deuxième solution : dans app-routing.module.ts, commentons la dernière partie ajoutée et les deux dernières
routes
r e f E
{ path: ’camion’, component: CamionComponent },
//
ch
{ path: ’voiture’, component: VoitureComponent },
©A
// { path: ’’, component: VoitureComponent }
// ]
// },
// { path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’ },
// { path: ’**’, redirectTo: ’/error’ }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Angular
Ajoutons le routage dans vehicule-routing.module.ts
];
ch r e
{ path: ’voiture’, component: VoitureComponent },
@NgModule({
©A
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class VehiculeRoutingModule { }
Angular
Lazy loading
H I ©
EL
OU
On doit définir la base dans app-routing.module.ts
M
f E L
Faire référence à vehicule-routing.module.ts avec la clé
loadChildren hr
c e
©A
e f E
{ path: ’vehicule’, loadChildren: ’./modules/vehicule/vehicule.module
r
ch
#VehiculeModule’ },
©A
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’ },
{ path: ’**’, redirectTo: ’/error’ }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Angular
H I ©
const routes: Routes = [
U EL
{ path: ’camion’, component: CamionComponent },
O
f E
{ path: ’’, component: VoitureComponent } LM
{ path: ’voiture’, component: VoitureComponent },
];
ch r e
@NgModule({ ©A
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class VehiculeRoutingModule { }
Angular
Dans app.module.ts, supprimer l’importation du module VehiculeModule
@NgModule({
declarations: [
AppComponent,
AdresseComponent,
H I ©
],
StagiaireComponent
U EL
O
LM
imports: [
BrowserModule,
AppRoutingModule
r e f E
ch
©A
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() { console.log(’app-module’); }
}
Angular
Ainsi, en saisissant
H I ©
/vehicule/camion : le composant camion sera affiché
U EL
O
f E LM
ch r e
©A
Angular
Ainsi, en saisissant
H I ©
/vehicule/camion : le composant camion sera affiché
U EL
O
f E LM
Remarque
ch r e
©A
Vérifier dans la console qu’en lançant l’application sur
localhost:4200, seul le message app-module est affiché
Angular
On peut aussi utiliser les promesses (solution utilisée depuis Angular 8) : seul mode de
chargement supporté par Ivy
Angular
Exercice
Créez deux nouveaux sous-modules cours et exercice (sans
les déclarer dans app.module.ts et avec un module de routage
pour chacun)
H I ©
Déplacez les composants stagiaire,U EL et observable
adresse
MO et calcul dans le
dans le sous-module cours et tableau
L
sous-module exercice
r e f E
Déclarez lesA ch
composants stagiaire, adresse et observable
©
dans cours.module.ts et tableau et calcul dans
exercice.module.ts
Définissez des nouvelles routes vers les composants déplacés et
qui doivent commencer par /cours ou /exercice
Angular
H I ©
loadChildren: () => import(’./modules/vehicule/vehicule.module’).then(m => m.VehiculeModule
EL
)
},
{
O U
LM
path: ’cours’,
loadChildren: () => import(’./modules/cours/cours.module’).then(m => m.CoursModule)
},
{
r e f E
path: ’exercice’,
ch
©A
loadChildren: () => import(’./modules/exercice/exercice.module’).then(m => m.ExerciceModule
)
},
{ path: ’error’, component: ErrorComponent },
{ path: ’**’, redirectTo: ’/error’ }
];