Chapitre 3

Composition d’une
Application Angular

Enseignant : Mr. Fouad OUESLATI A.U: 2024 /2025

 Application Angular – Présentation

Une application Angular est modulaire.

Elle possède au moins un module appelé « module racine » ou « root

module »

Elle peut contenir d’autres modules à part le module racine.

Par convention, le module racine est appelé « AppModule » et se trouve
dans un fichier appelé « app.module.ts»

2
3
 Application Angular – Structure

• e2e: Tout ce qui va concerner les tests end to end (tests d’intégration)
• node_modules: contient les dépendances installés avec npm
• src: les différents éléments de l’application (composants, services, …)
• src/app : le code de l’application
• package.json : fichier déclarant les dépendances NPM tirées lors de
l'installation du projet et nécessaire à la compilation et les tests
• tslint.json : fichier définissant les règles de codage TypeScript.
• tsconfig.json: un fichier de définition TypeScrit
• src/assets : où placer tous les assets tels que les images.
• src/environments : on retrouve les différents fichiers de configuration
spécifiques aux environnements d’exécution.

4
 Modules/NgModules

Un module est un bloc de code qui sert à encapsuler des fonctionnalités similaires
une application.

Le système de modularité dans Angular est appelé NgModules.

Un module peut être exporté sous forme de classe.

La classe qui décrit le module Angular est une classe décorée par @NgModule.

Exemple: FormsModule, HttpClientModule, RouterModule

5
Modules/Exemples

6
 NgModule

NgModule = classe importé de angular/core et marké apr le décorateur

@NgModule et sa métadata

@NgModule : décorateur qui permet de définir la classe en tant que NgModule

Métadata ou métadonnée est un objet qui décrit le comportement d’un élément qui est
dans notre cas le module

7
 NgModule – métadata

Declarations: les composants – directives – pipes utilisés par ce module

Imports: les modules internes ou externes utilisés dans ce module

Providers: Les services utilisés

Bootstrap: déclare la vue principale de l’application (celle du composant racine).

Seul le root NgModule modifie cette propriétés.

8
Composant-Définition

Un composant est un élément réutilisable,

indépendant et responsable d’une seule
action métier.

Un module peut contenir un ou plusieurs

composants.

Une application a au moins un composant

racine

9
Un composant crée est décrit par
défaut par quatre fichiers :

Fichier Rôle
nomComp.component.ts Classe décrit le métier du composant
nomComp.component.html Fichier template du composant
nomComp.component.css Fichier de style du composant
nomComp.component.spec.ts Fichier de test du composant

10
Un composant définit de(s) vue(s) et utilise de(s) service(s) pour réaliser un traitement.

Le métier du composant est décrit dans la classe du composant qui peut être
exportée, définit par le décorateur @component et décrite par un objet «
métadata »

Composant-Métadata

selector : définit une instance du composant dans le fichier HTML.

Exemple: <app-root></app-root>

templateUrl: l’url du fichier HTML associé au composant

styleUrls: l’url du fichier CSS associé au template du composant

providers: les services dont le composant a besoin pour son fonction 11

12
 Vue / Template

Une vue est définit par le composant et son template.

Les vues sont oragnisées d’une façon hiérarchique afin de pouvoir modifier ou cacher
des sections de pages ou des pages entières.

Le template attaché directement au composant est la vue hôte de ce composant «

host view »

Un template est un fichier HTML contenant:

1- La syntaxe régulière d’HTML (<div>,<h1>,<p>,…)
2- La syntaxe template de Angular où les éléments
peuvent être classés en 3 grandes catégories :
directives – pipes – databinding

13
 Angular Syntax template-Data binding

Soit deux composants A et B comme suit:

14
 Rappel : Interpolation & Proprety-Binding

L’interpolation permet de passer une valeur du composant vers le template afin de

l’afficher.

Property binding permet de modifier la valeur d’une propriété d’un composant ou

d’un élément

15
 Rappel : Event-Binding & Two-Way-data-binding

Event binding permet d’appeler une méthode du composant suite à une action faite
par l’utilisateur au niveau du template.

Two-way data binding permet de récupérer une valeur à partir du template et l’envoyer
vers une propriété et vis versa.

16
 Interaction entre composants

Deux composants peuvent avoir plusieurs interactions.

Nous allons voir ici uniquement deux interactions possibles entre parent et fils:

1- Le parent passe des informations au fils « @Input() »

2- Le parent intercepte les événements du fils « @Output() »

Un composant peut avoir des propriétés d’entrée ou de sortie, appelés respectivement

« input property » et « output property ».
• La propriété d’entrée permet de récupérer une valeur depuis le composant parent et
décorée par « @Input() »
• La propriété de sortie expose les producteurs d'événements, tels que les objets
EventEmitter et décorée par « @Output() »

17
 Interaction entre composants-2-

Pour déclarer les propriétés input et output deux façons possibles:

1- Dans la classe du composant fils :

2- Au niveau du métadata du composant fils :

18
 Interaction entre composants-3-

Le composant parent peut alors envoyer des données au composant fils et entend les
événements déclenchés au niveau de son fils.

19
 Cycle de vie d’un composant

cycle de vie :Un composant passe par plusieurs phases depuis sa création jusqu’à sa
destruction.

Angular maintient et suit ces différentes phases en utilisant des méthodes appelées «
hooks ».

On peut alors à chaque phase implémenter une logique.

Ces méthodes se trouvent dans des interfaces dans la librairie « @angular/core »

20
Cycle de vie d’un composant-2-

21
Cycle de vie d’un composant-3

22
Cycle de vie d’un composant-4

23
Demo Atelier1 chapitre3:

24
Bootstrap Atelier1 Angular Forms Atelier2 Angular Service TP2

Atelier1 chapitre3:

Créer les trois composants:

ng generate component parent

ng generate component fils
ng generate component frere

25
Atelier1 chapitre3: créer la classe « message.service.ts »

26
Atelier1 chapitre3: Parent component

27
Atelier1 chapitre3: Frere component

28
 Atelier1 chapitre3: fils component

Dans app.component.html :

<app-parent></app-parent>
29
Atelier2 chapitre3: Demo

30
 Atelier2 chapitre3: Explication

Nous souhaitons developper une application Angular qui représente un catalogue de

produits simple, illustrant la communication entre composants père, fils, et frère. Cet
exemple utilise également les formulaires et les hooks du cycle de vie d'un
composant. Nous allons construire une application Angular avec trois composants :

ProductListComponent (composant père) : affiche la liste des produits.

ProductComponent (composant fils) : représente un produit individuel avec un

formulaire pour mettre à jour le produit.

ProductDetailComponent (composant frère) : affiche les détails d'un produit

sélectionné.

31
 Atelier2 chapitre3: Explication

Étape 1 : créer les components

ng generate component components/ProductList

ng generate component components/Product

ng generate component components/ProductDetail

Étape 2 : Création du modèle de produit

Dans le dossier src/app, créez un fichier nommé product.model.ts pour définir le modèle de
produit

32
Étape 3 : ProductListComponent (Composant Père)

Ce composant contient la liste des produits et gère la sélection d'un produit pour afficher ses
détails dans un composant frère.

Le composant ProductListComponent est considéré comme le composant père qui gère la liste
des produits et la logique de sélection d'un produit particulier pour afficher ses détails dans un
autre composant.

33
Explication des rôles et étapes dans ProductListComponent :

1- Affichage de la liste des produits :

ProductListComponent maintient un tableau de produits (products), chaque produit étant un

objet avec des propriétés comme id, name, price, et description.

Il affiche cette liste dans une boucle avec *ngFor dans le template HTML. Chaque produit est
rendu comme un élément de liste <li>.

Lorsqu’un produit est cliqué, cela déclenche une méthode appelée onSelectProduct, qui
sélectionne le produit cliqué.
2- Sélection d'un produit :

Quand l’utilisateur clique sur un produit dans la liste, onSelectProduct(product) est appelée avec
le produit sélectionné comme argument.

Cette méthode met à jour une propriété appelée selectedProduct dans ProductListComponent,
qui représente le produit actuellement sélectionné.

En définissant selectedProduct, ProductListComponent peut gérer quel produit afficher dans les
composants enfants, ce qui est essentiel pour permettre la communication entre les
composants.
3- Affichage des détails et modification dans les composants frères :

ProductListComponent utilise la propriété selectedProduct pour partager le produit sélectionné avec deux
autres composants :

ProductDetailComponent : Ce composant est un frère de ProductComponent et est utilisé pour afficher les
détails du produit sélectionné.

ProductComponent : Ce composant affiche un formulaire pour modifier les informations du produit

sélectionné.

Les deux composants sont affichés dans le template de ProductListComponent avec

*ngIf="selectedProduct", donc uniquement lorsque selectedProduct est défini.

selectedProduct est passé en tant qu’entrée (@Input) aux composants frères, permettant à
ProductDetailComponent d'afficher les informations actuelles du produit et à ProductComponent de pré-
remplir le formulaire de modification.
4- Mise à jour et réactivité entre les composants frères :

Lorsque le produit est modifié via ProductComponent (formulaire de modification), un

événement update est émis avec le produit mis à jour.

ProductListComponent écoute cet événement (update) et appelle onUpdateProduct($event),

où $event contient le produit modifié.

onUpdateProduct met à jour la liste des produits pour refléter les nouvelles informations et
met également à jour selectedProduct avec une nouvelle instance pour déclencher la
détection de changement dans Angular.

Grâce à cette mise à jour, ProductDetailComponent reçoit automatiquement les nouvelles

informations et affiche les détails mis à jour, assurant la cohérence entre les composants
frères.
Etape 4 : ProductComponent (Composant Fils)

Ce composant représente le formulaire d'un produit pour modifier ses informations. Il envoie les
modifications au composant parent ProductListComponent.

Dans cette architecture, ProductComponent est un composant fils de ProductListComponent. Son rôle
principal est de fournir un formulaire pour modifier les informations d'un produit sélectionné, puis
d'envoyer les modifications au composant parent (ProductListComponent).

1- Affichage du formulaire de modification :

ProductComponent reçoit un objet product via un décorateur @Input de la part de son parent
(ProductListComponent). Ce produit est le produit actuellement sélectionné dans la liste.

Il affiche un formulaire pré-rempli avec les informations actuelles de ce produit, comme le nom, le prix
et la description, en utilisant la directive [(ngModel)] pour la liaison bidirectionnelle des données.
2- Modification des informations du produit :

L’utilisateur peut modifier les informations dans le formulaire.

Grâce à [(ngModel)], les champs du formulaire sont liés directement aux propriétés de l'objet product,
ce qui permet de capturer les modifications en temps réel.

3- Envoi des modifications au parent (ProductListComponent) :

Lorsque l’utilisateur soumet le formulaire, ProductComponent déclenche un événement update en

utilisant le décorateur @Output.

Cet événement envoie le produit mis à jour comme payload vers le composant parent.

Le composant parent (ProductListComponent) écoute cet événement et reçoit les modifications pour
mettre à jour la liste des produits et le produit sélectionné.
Étape 5 : ProductDetailComponent (Composant Frère)

Ce composant affiche les détails du produit sélectionné sans possibilité de modification.

ProductDetailComponent est un composant frère de ProductComponent, et son rôle est simple : afficher les
détails du produit sélectionné sans permettre de le modifier.

1- Affichage des informations : ProductDetailComponent reçoit le produit sélectionné de la part de son

parent (ProductListComponent) via un décorateur @Input.

Il affiche les détails du produit (comme le nom, le prix et la description) dans un format lisible pour l'utilisateur.

Contrairement à ProductComponent, ce composant n’a pas de formulaire ni de fonctionnalité de modification.

Son rôle est strictement limité à l'affichage des informations, ce qui en fait un composant purement visuel.

2- Synchronisation des détails :

Lorsque ProductListComponent met à jour le produit sélectionné après une modification,

ProductDetailComponent reçoit automatiquement les nouvelles informations et met à jour l'affichage,
assurant une vue cohérente des détails.
Résultat

Cet atelier crée une application où le ProductListComponent agit comme le composant parent,
et gère la communication entre le ProductComponent (fils) et le ProductDetailComponent
(frère). Les formulaires et les hooks du cycle de vie (ngOnInit, ngOnChanges) sont également
utilisés pour illustrer un flux de données complet et la modification d’un produit.