Angular Avancé

Angular Avancé
INSTITUT SUPÉRIEUR DES ÉTUDES TECHNOLOGIQUES DE SIDI BOUZID
ENSEIGNANT: NIZAR MAATOUG
GROUPE: MDW2 2019-2020

Résultats
➢ Développer une application Angular en suivant les bonnes pratiques
➢ Consolider et pratiquer les concepts de base
➢ Optimiser les performances d’une application Angular
ISET Sidi Bouzid: Angular Avancé-MDW 2019/2020
2

Application de Gestion de voitures
 On souhaite développer une application de gestion de voitures.
 Chaque voiture est caractérisée par:
 un identifiant
 Une marque
 Un modèle
 une couleur
 L’application permet de:
 Consulter les voitures
 Ajouter une nouvelle voiture
 Mettre à jour une voiture
 Supprimer une voiture
3

Démo & code source
 Démo: https://www.youtube.com/watch?v=ddU92H6fazk
 Code source : https://github.com/nizar-maatoug/gestion-voitures
4

Environnement de développement
 Bibliothèques javascript Node JS
 Angular CLI
 Environnement de développement intégré VS code
5

Création du projet
 ng new gestion-voitures --routing
 Installation de bootstrap:
 npm install -- save bootstrap
 npm install --save jquery
 npm install --save popper.js
6

Mise à jour angular.json
7

Architecture de
l’application
8
Voitures
AppModule
SharedModule
RoutingModule

Architecture de l’application
 Comment découper mon application en modules ?
 Combien de modules dois-je créer ?
 Où placer mes composants, comme la barre de
navigation par exemple ?
 Dans quel dossier regrouper mes services ?
 Comment modéliser mes entités avec des
classes TypeScript ?
 Ou placer les fichiers nécessaires pour
l’authentification ?
9

10
?

Architecture: Rappel
 Une application Angular est structurée en modules
 Un module regroupe logiquement des composants
graphiques, des directives, des pipes et d’autres
sous-modules.
 Un module fournit des services
 Par défaut, une application Angular contient un seul
module principal AppModule
11

12
AppModule
AppComponent
Nav-barComponent
FooterComponent
VoitureComponent
ListeVoitureComponent
Pour une petite application, le
module principal AppModule est
suffisant.

13
AppModule
AppComponent
Nav-barComponent
FooterComponent
VoitureComponent
.
.
.
Mais pour les moyennes et grandes
applications, AppModule sera très
chargé, donc il est difficile de faire
évoluer l’application, de la maintenir
ou même de repérer un fichier

14
AppModule
AppComponent
Nav-barComponent
FooterComponent
VoitureModule
VoitureComponent
.
.
.
DetailVoitureComponent
EditVoitureComponent
Il faut penser à organiser
l’application par module pour
chaque fonctionnalité: exemple:
gestion voiture

15
AppModule
Fonctionnalité1 Fonctionnalité2 Fonctionnalité3

SharedModule: Minimiser les importations
 Souvent, des modules, des composants et des
directives sont sollicités par plusieurs composants
dans différents modules.
 Une bonne pratique consiste à regrouper ces
dépendances dans un seul module appelé
SharedModule (ou module partagé)
16

17
Des importations répétitives dans plusieurs modules

18
SharedModule
exports [ ]
Exemple:
CommonModule un
module angular qui
exporte les directives de
base: NgIF, NgFor,…
Solution: Factoriser ces importations répétitives dans un
module unique: SharedModule

19
SharedModule
exports [ ]
Exemple:
CommonModule un
module angular qui
exporte les directives de
base: NgIF, NgFor,…
Solution: Factoriser ces importations répétitives dans un
module unique: SharedModule

Architecture:
Mise en place
20
Voitures
AppModule
SharedModule
RoutingModule

Démarche
 Créer le SharedModule
 Créer le module fonctionnel VoituresModules
 Importer le module SharedModule dans VoituresModule
21

Créer le module Shared
22
Générer le module
SharedModule

Exporter CommonModule
23
Exporter le CommonModule
pour le rendre disponible aux
modules qui importent le
SharedModule

Créer le module Voitures
24
Générer le module
VoituresModule

VoituresModule: importer Shared
25
Importer le module
SharedModule

Architecture initiale
26
AppModule
VoituresModule SharedModule
AppRoutingModule❑ C’est l’architecture initiale
de notre projet
❑ Elle peut évoluer au cours
du développement
❑ Mais elle est flexible,
évolutive et rend notre
projet facilement
maintenable

Exercice
 Effectuer les mises à jour
nécessaires afin d’obtenir
l’architecture suivante
27
AppModule
VoituresModule SharedModule
AppRoutingModule

Solution
28

Les services
 Un service est une classe TypeScript qui implémente
une partie de la logique métier de l’application
 Exemple: Calcul âge, ajout d’une voiture côté
serveur,...
 Permet aussi de mémoriser et partager l’état de
l’application entre plusieurs composants
 Exemple: mémoriser et partager la liste des voitures
 Il faut bien gérer l’état de l’application:
 Garantir la cohérence de l’application
 Synchroniser les composants
29

30
AppModule
Service
Un service fourni par le AppModule sera unique dans toute
l’application: une seule instance (Singleton)

31
AppModule
Service
Un service fourni par un module sera unique et accessible à tous les
sous-modules et les composants de ce module

32
Module
Composant
Sous-Composant
Service
Un service fourni par un composant sera accessible uniquement dans
le composant lui-même et ses composants fils

Bonne pratique: service
 Dans la grande majorité des cas, un service doit
avoir une seule instance dans l’application
 Dans ce cas, il doit être fourni par le AppModule
33
@Injectable({
providedIn: 'root'
})
export class VoituresService {…}
root: fourni par le module
principal AppModule

partie Backend
34
client Serveur
Application
Angular
Application Spring
(Java) BD
GET URL/voitures
Retourne liste voitures
GET URL/voitures/1
Retourne voiture id=1
POST URL/voitures
V
OK
V
PUT URL/voitures
V
OK
V
DELETE URL/voitures/2
OK

VoituresService (1/2)
35
import { HttpClient} from "@angular/common/http";
import { Observable, Subject } from 'rxjs’;
import { Voiture } from "./model/voiture.model";
import { tap } from 'rxjs/operators’;
@Injectable({
providedIn: 'root’
})
export class VoituresService {
private baseURL="http://localhost:8080/voitures";
voitureChanged=new Subject<Voiture[]>();
constructor(private http: HttpClient) { }
/**Get voitures */
getVoitures():Observable<Voiture[]>{
return this.http.get<Voiture[]>(this.baseURL);
}
/**Get voiture */
getVoiture(id:number):Observable<Voiture>{
const url= this.baseURL+ '/'+ id;
return this.http.get<Voiture>(url);
}
/**Post voiture */
postVoiture(voiture: Voiture): Observable<Voiture>{
return this.http.post<Voiture>(this.baseURL, voiture).pipe(
tap(v => this.notifyVoitureChanged())
)
}

VoituresService (2/2)
36
/**PUT: mettre à jour la voiture dans le serveur */
updateVoiture(voiture: Voiture): Observable<Voiture>{
return this.http.put<Voiture>(this.baseURL, voiture).pipe(
);
}
/**DELETE: supprimer la voiture */
deleteVoiture(voiture: Voiture):Observable<String>{
console.log(voiture.id);
return this.http.delete<String>(this.baseURL+'/'+voiture.id).pipe(
);
}
notifyVoitureChanged(){
this.getVoitures().subscribe(
voitures => this.voitureChanged.next(voitures)
)
}

Les composants:
ARCHITECTURE ET BONNES PRATIQUES
37

Angular : framework orienté composant
 Angular est un framework orienté composant
 Single Page Application (SPA): application web avec
une seule page
 L’unique page web est le socle d’une arborescence
de composants
 Problématique:
 Comment structurer ces composants d’une façon
optimale, maintenable, évolutive ?
 Comment gérer la communication entre ces
composants afin de garantir la cohérence et l’état de
l’application?
38

 Une application Angular
est un assemblage de
composants
 Par analogie, les
composants ressemble à
des pièces de Lego
39

Types des composants
40
Composant de
page
Composant
intelligent (smart)
Composant idiot
(dumb)
 3 types de composants:
 composant de page: conteneur
d’une arborescence de
composants, son rôle est de
structurer les composants
 Composant intelligent:
communique avec les services
 Composant idiot: moins de
logique métier, il se charge
d’afficher les données

41
FooterComponent : dumb
HeaderComponent : Smart
HomeComponent : page

42
voitureComponent: composant de page
voitureListComponent: smart
VoitureDetailComponent: smart
VoitureItemComponent : dumb

Arborescence des composants
43
HomeComponent
Header
VoitureComponent
VoitureList
VoitureItem
Router
VoitureDetailVoitureStart VoitureEdit
Router
PageNotFound
Footer

 Dans le module AppModule, création des composants:
 HomeComponent
 HeaderComponent
 FooterComponent
 PageNotFoundComponent
 Dans le module VoitureModule, création des composants:
 VoituresComponent
 VoitureListComponent
 VoitureItemComponent
 VoitureStartComponent
 VoitureDetailComponent
44
Manip: création des composants

Manip: création des composants
 ng g c home
 ng g c header
 ng g c footer
 ng g c page-not-found
 ng g c voitures --module=voitures
 ng g c voitures/voiture-list --module=voitures
 ng g c voitures/voiture-list/voiture-item –module=voitures
 ng g c voitures/voiture-start --module=voitures
 ng g c voitures/voiture-detail --module=voitures
 ng g c voitures/voiture-edit --module=voitures
45
AppModule
VoituresModule

Résultats
46

Home: composant principal
47
@NgModule({
declarations: [
AppComponent,
HomeComponent,
HeaderComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
VoituresModule
],
providers: [],
bootstrap: [HomeComponent]
})
export class AppModule { }
AppModule

HomeComponent
48
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

VoituresComponent
49
<div class="row">
<div class="col-4">
<app-voiture-list></app-voiture-list>
</div>
<div class="col-8">
<router-outlet></router-outlet>
</div>
</div>
import { Component, OnInit } from '@angular/core
';
@Component({
selector: 'app-voitures',
templateUrl: './voitures.component.html',
styleUrls: ['./voitures.component.css']
})
export class VoituresComponent implements OnInit
{
constructor() { }
ngOnInit(): void {
}
}

Routage et navigation
50
HomeComponent
Header
VoitureComponent
VoitureList
VoitureItem
Router
Router
PageNotFound
Footer/voitures /**
/voitures /voitures/:id
/voitures/edit/:id
/voitures/new

Routes imbriqués
51
HomeComponent
Header
VoitureComponent
VoitureList
VoitureItem
Router
Router
PageNotFound
Footer/voitures /**
/ /:id
/edit/:id
/new

Routes imbriqués
52
const appRoutes: Routes=[
{path: '', redirectTo: 'voitures', pathMatch:'full’},
{
path:'voitures’,
component: VoituresComponent,
Children: [
{ path: '', component: VoitureStartComponent},
{ path: 'new’, component: VoitureEditComponent},
{ path: ':id', component: VoitureDetailComponent},
{ path: 'edit/:id',component: VoitureEditComponent,}
]
},
{path: '**', component: PageNotFoundComponent}
];

Routes imbriqués
 Les routes imbriqués permettent de factoriser les
chemins
 En harmonie avec l’aspect hiérarchique des
composants: un composant héberge un ou plusieurs
composants
53

Routes par module
 Une moyenne ou grande application Angular
possède plusieurs modules de fonctionnalités
 Le module principal de routage sera trop chargé
 Solution: déléguer une partie de la gestion des
routes pour chaque module de fonctionnalités
 Chaque module de fonctionnalités gère ses propres
routes
54

Routes par module
55
Voitures
AppModule
SharedModule
AppRouting
VoituresRouting

Routes par module: AppRouting
56
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
{path: '', redirectTo: 'voitures', pathMatch:'full'},
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [RouterModule]
})
export class AppRoutingModule{
}

Routes par module: VoituresRouting
57
...
const VoituresRoutes: Routes=[
{
path:'voitures', component:VoituresComponent,
children:[
{ path: '', component: VoitureStartComponent
},
{ path: 'new’, component: VoitureEditComponent
},
{ path: ':id', component: VoitureDetailComponent,
},
{ path: 'edit/:id’, component: VoitureEditComponent,
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(VoituresRoutes)
],
exports: [RouterModule]
})
export class VoituresRoutingModule { }

Routes par module: AppModule
58
...
@NgModule({
declarations: [
HomeComponent,
HeaderComponent,
FooterComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
SharedModule,
VoituresModule,
AppRoutingModule
],
bootstrap: [HomeComponent]
})
export class AppModule { }
Il faut respecter cet ordre
d’importation pour que
Angular puisse construire un
table de routage global
fonctionnel

Communication
entre composants
59

Communication entre composants
 La communication entre les composants fait partie
de l’architecture de l’application.
 Elle obéit à des règles stricts afin de:
 Optimiser les relations entre les composants
 garantir la cohérence de l’état de l’application
60

Communication entre composants
 Les flux de données
passent dans un seul sens
 La communication entre
service et composant
smart est réactive
 La communication d’un
composant smart vers un
composant dumb utilise le
décorateur @input
 Un composant dumb peut
notifier son père smart
 Pas de communication
direct entre composants
homologues
61
Service
Composant
smart
Composant
dumb
observable
@input @output
Composant
smart

62
ISETSidiBouzid:AngularAvancé-MDW2019/2020
VoituresService
VoituresList
VoitureItem
@Input() voiture: Voiture;
<img [src]="voiture.photo">
this.voitureService.getVoitures().subscribe(v =>{
this.voitures=v;
});
<app-voiture-item *ngFor="let v of voitures"
[voiture]="v">
</app-voiture-item>
getVoitures():Observable<Voiture[]>{
return this.http.get<Voiture[]>(this.baseURL);
}
Observable<Voiture[]>
@input

63
ISETSidiBouzid:AngularAvancé-MDW2019/2020
VoituresService
VoituresList VoitureEdit
this.voitureService
.postVoiture(this.voiture)
.subscribe(
v => {
this.voiture={};
formulaire.reset()
}
);
postVoiture(voiture: Voiture): Observable<Voiture>{
return this.http.post<Voiture>(this.baseURL, voiture).pipe(
tap(v => this.notifyVoitureChanged()))}
1
notifyVoitureChanged(){
this.getVoitures().subscribe(
voitures => this.voitureChanged.next(voitures))
}
voitureChanged=new Subject<Voiture[]>();
2
3
this.voitureService.voitureChanged
.subscribe(
(voitures :Voiture[]) => {
this.voitures=voitures
}
);
4 Notification réactive du modif Ajout/Modif voiture

Problématique
65
voiture 1
voiture 2
voiture 3
VoituresList VoitureDetails
VoituresComponent
?

Solution: Resolver
66
voiture 1
voiture 2
voiture 3
VoituresList
VoitureDetails
Router
/1
Voiture
Resolver
Voiture
Service
ActivatedRouteSnapshot
getVoiture(1) Observable<Voiture>
Observable<Voiture>
voiture
1
Activated
Route
(data)

VoitureResolver: code source
67
@Injectable({ providedIn: 'root' })
export class VoitureResolver implements Resolve<Voiture> {
constructor(private voitureService: VoituresService){}
resolve(route: ActivatedRouteSnapshot): Observable<Voiture> {
let id=route.paramMap.get('id’);
if(id!=null){
return this.voitureService.getVoiture(+id);
}
else{
return null;
}
}
}

VoitureRouting: update
68
{
path:'voitures',
component:VoituresComponent,
children:[
{
path: '',
component: VoitureStartComponent
},
{
path: 'new',
component: VoitureEditComponent
},
{
path: ':id',
component: VoitureDetailComponent,
resolve:{
voiture: VoitureResolver
}
},
{
path: 'edit/:id',
component: VoitureEditComponent,
resolve:{
voiture: VoitureResolver
}
}
]
}
];

VoitureDetail
69
export class VoitureDetailComponent implements OnInit {
voiture : Voiture;
isLogged: boolean;
constructor(private voitureService: VoituresService,
private router: Router,
private route: ActivatedRoute,
) { }
ngOnInit(): void {
this.route.data.subscribe(
(data)=>this.voiture=data['voiture']
);
}
}

Sécurité: Introduction
 Généralement une application web contient:
 Des cas d’utilisations public
 D’autres fonctionnalités privées, nécessitant une
authentification
 Exemple: Notre application de gestion de voitures
est composée de:
 une partie publique: Affichage des voitures
 Une partie privée: Ajout, Modification, suppression de
voitures
71

Authentification: JWT(JSON Web Token)
 Les deux parties Frontend et backend sont découplées
 La communication est sans état (statless <> statefull)
72
Application
Angular
Backend
username, password
Jeton JWT
Requete +Jeton
Réponse
 Un jeton possède une durée de vie
 Lorsque cette durée est expirée, il faut renouveler l’authentification

Authentification
73
AuthComponent AuthService
user
Backend
POST /authenticate
user
jetonBehaviorSubject
jeton

Apres Authentification: Interceptor
74
VoitureService
POST /voitures
V
AuthInterceptor
POST /voitures
V
jeton
AuthService
jeto
n
jeton
subscribe
Backend

Sécuriser les routes: AuthGard
75
voiture 1
voiture 2
voiture 3
VoituresList
Nouvelle voiture Router
AuthGard
Service
canActivate
Auth
Service
Authorisation
EditComponent

Démarche
 Créer un module pour l’authentification AuthModule
 Créer les deux entités User et Jeton
 Créer le service AuthService pour gérer l’authentification
 Créer le composant AuthComponent
 Mettre à jour AppRoutingModule: ajouter la route vers
AuthComponent
 Créer le service AuthInterceptor permettant de modifier
chaque requête http sortante en lui ajoutant le jeton
 Créer le service AuthGard pour garder les routes privées
76

AuthModule
77
Voitures
AppModule
SharedModule
AppRouting
VoituresRouting
AuthModule

Les entités User et Jeton
78
export class User{
constructor(public username:String,
public password: String
){}
}
export class Jeton{
constructor(public jwt:String){}
}

Exercice
 Analyser le code source de l’application pour
terminer les étapes restantes
79

Introduction
 Une grande application Angular est composée de plusieurs
modules de fonctionnalités
 En production, le chargement de l’application au début peut
prendre beaucoup de temps
 Idée:
 Au début, charger uniquement les modules nécessaires
 Les autres modules de fonctionnalités seront chargés à la demande
 Cette technique s’appelle chargement paresseux, ou Lazy-loading
81

Lazy-loading: Exemple
82
AppModule
SharedModule
AppRoutingAuthModule

Lazy-loading: Exemple
83
Voitures
AppModule
SharedModule
AppRouting
VoituresRouting
AuthModule
Lazy-loading

Démarche
 Mettre à jour AppRoutingModule
 Mettre à jour VoituresRoutingModule
 Mettre à jour AppModule: supprimer la dépendance
VoitureModule
84

AppRoutingModule
85
{path: '', redirectTo: 'voitures', pathMatch:'full'},
{
path:'voitures’,
loadChildren: ()=>import('./voitures/voitures.module').then(m =>m.VoituresModule)
}
{path:'login', component:AuthComponent},
];

VoituresRoutingModule
86
{
path:’voitures’,
component:VoituresComponent,
children:[
{
path: '',
component: VoitureStartComponent
},
{ path: 'new', component: VoitureEditComponent},
{ path: ':id', component: VoitureDetailComponent,
resolve:{voiture: VoitureResolver}
},
{ path: 'edit/:id', component: VoitureEditComponent,
resolve:{ voiture: VoitureResolver}
}
]
}
];

AppModule
87
import { VoituresModule } from "./voitures/voitures.module";
imports: [
BrowserModule,
SharedModule,
AuthModule,
VoituresModule,
AppRoutingModule,
HttpClientModule
]

Exercice
 Effectuer les changement nécessaires pour rendre
le chargement du module AuthModule Lasy
88

Preloading Strategy
 Avec lazy-loading, le module sera chargé du serveur à la
demande de l’utilisateur
 Souvent ce module est assez volumineux, donc
l’utilisateur va sentir la latence du chargement
 Solution: commencer le chargement des modules lazy
juste après le chargement du noyau
89

Preloading Strategy
90
AppRoutingModule
import { Routes, RouterModule, PreloadAllModules } from "@angular/router";
imports: [
RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules })
],

Angular Avancé

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Angular Avancé

Similaire à Angular Avancé (20)

Angular Avancé