Chapitre3_Angular_part1 ANGULAR ISTIC SI.pdf

1. Mini Projet Web
Chapitre 3 : Angular

2.  Site Officiel d’Angular : https://angular.io/
 OpenClassRoom :
 Débuter avec Angular : https://openclassrooms.com/fr/courses/7471261-
debutez-avec-angular/7471268-tirez-le-maximum-de-ce-cours
 Niveau Avancé en Angular :
https://openclassrooms.com/fr/courses/7471271-completez-vos-
connaissances-sur-angular
2

3. 3

4. Angular
4
 Angular est un framework Front-End de développement Web et mobile,
open-source, développé et géré par Google
 Les applications Angular sont en grande majorité codées en TypeScript qui
est convertis en JavaScript avant l’exécution “transpilé” pour permettre
aux applications Angular de s’exécuter dans tous les navigateurs Internet

5. 5
 Le TypeScript est un langage de programmation développé par Microsoft
 TypeScript est un sur-ensemble (un “superset”) de JavaScript (tout code valide
en Javascript l’est également en TypeScript)
 Cependant, le langage introduit des fonctionnalités optionnelles comme le
typage ou encore la programmation orientée objet…
 Un code TypeScript doit être transcompilé en Java Script pour être
compréhensible par les navigateurs.

6.  Angular permet de créer des single page applications (SPA)
 SPA : est une application web accessible via une page web unique. Le but est
d’éviter le chargement d’une nouvelle page à chaque action demandée, et de
fluidifier ainsi l’expérience utilisateur.
 Exemples de SPA: Gmail, Google Maps, Facebook ...
6

7. 7
Fichier
index.html
Fichier
index.html
listeProduits.html
newProduit.html
detailsProduit.html

8. 8
Client Serveur
Première requête
Autres requêtes : Ajax
(sans recharger la page)
Échange de données json
Une seule page contenant
tout le site en HTML

9.  AJAX est l'acronyme d'asynchronous JavaScript and XML : JavaScript et XML
asynchrones
 AJAX est une méthode utilisant différentes technologies permettant
d'effectuer des requêtes au serveur web et, en conséquence, de modifier
partiellement la page web affichée sur le poste client sans avoir à afficher
une nouvelle page complète.
9

10. 10
Application
Angular
BackEnd
Echange de données
json
+ Protocole Http
Exposer les services
de l’application
BD
Frond-end

11. 11
e2e : généré pour les tests
node_modules: c'est dans
ce dossier que sont install
és tous les plugins Node i
nstallés via npm
scr: où vous trouverez tous les fichiers
sources pour votre application
(vous développez ici).

12. 12
est un simple fichier css permettant de créer des styles à
appliquer globalement sur tout le site.
C’est le fichier de démarrage. Il permet de définir les mo
dules avec lesquels application va démarrer.
c’est notre SPA
Dossier contenant les fichiers correspondants à
notre component de base créé par Angular
les autres composants à créer seront placés sous
ce dossier
src
Dossier où mettre les contenus multimédia (imag
es, audio, …

13.  C’est quoi ?
 un module qui contient du code HTML, CSS et
JavaScript (ou Typescript) pour afficher une partie de
l'interface utilisateur d'une application
 Objectif?
 Création d’une nouvelle balise HTML personnalisée
 Pourquoi?
 Code Réutilisable et modulaire
13
Code HTML
(.html)
Code CSS
(.css)
TypeScript
(.ts)
Component
à partir d’une
nouvelle balise
HTML
utilisation

14. 14
Vous pouvez écrire tout le
code du composant (code TypeS
cript + Html + Css) dans un seule
fichier « .ts ». Mais c’est très
difficile à gérer par la suite
Component
.ts
.html
.css
Qu’est ce que
je dois
gérer??
Quelle
structuration
adoptée pour
les données
gérées??
Selon quel
style afficher
les données

15. 15
 Un composant Angular est défini par :
 Un fichier .ts : une classe qui contient des attributs (les données
gérées) et des méthodes pour manipuler les données
 Un fichier .html : l'interface utilisateur qui gère (affichage,
saisie…) les données du fichier .ts.
 Un fichier .css : contenant les styles appliquées par le composant.

16. 16
Exemple 1 : je veux afficher les informations relatives à un Etudiant
Exemple 2 : je veux afficher une liste de produits
j’ai besoin d’un tableau en JavaScript pour sauvegarder
une liste de produits.
fichier .ts
j’utilise un tableau Html pour afficher la liste des produits
fichier .html
Les données d’un étudiant (sous forme d’attributs): id,
nom, age …
Fichier .ts
Une card Bootsrap affichant les données de l’étudiant
Fichier .html

17.  Créons un Composant pour afficher les détails d’un étudiant
17
Class afficheComponent
{
id : int;
nom : string;
age:int;
//initialisation des attributs
ngOnInit()
{
this.id = 5;
this.nom = 'ALI’,
this.age = 20;
}
}
<h1> Details Etudiant </h1>
<p>{{id}}</p>
<p>{{nom}}</p>
<p> {{age}} </p>
Affiche.component.ts
Affiche.component.html
Affichage

18.  Chaque SPA se compose de plusieurs composants imbriqués les uns
dans les autres sous forme d’arbre (il faut donc avoir un
Composant racine) : c’est app
18

19. 19
AppComponent
Home Users
Publicité
Composant
menu
Composant
contenu
Composant racine
Composant
pub
Article 1
Article 2
Composant
Article

20.  Vous pouvez specifier les propriétés suivantes dans le fichier .ts d’un composant :
 selector: nom de la balise pour utiliser ce composant.
 standalone: to describe whether the component requires a NgModule.
 imports: ajouter les dépendances (composants, biblithèques ..)
 template: décrit le nom du fichier .html du composant.
 styleUrls: liste des URL des fichiers CSS utilizes par le composant.
20

21. 21
import { Component } from '@angular/core';
@Component ({
selector : 'app-root',
templateUrl : './app.component.html',
styleUrls : ['./app.component.css']
})
export class AppComponent {
title = 'angular';
}
Importation des dépendances
(dans ce cas pour pouvoir utiliser
l’annotation @Component)
Le nom de la balise qu’on utilisera pour
afficher le composant
Chemin vers le code Html
correspondant au composant
Chemin vers les feuilles de styles qui
concernent le composant
Le composant expose la propriété « title » qui sera consommée
et évaluée par la template du composant lui même
Décorateur indiquant qu’il s’agit d’un composant
Informations
relatives aux
composant
Import des
dépendances
(bibliothèques,
classes,
services …)
La logique du
composant

22. 22
chargement du composant racine app:
Sélecteur (balise) du composant à
afficher
<body>
<app-root> </app-root>
</body>
Quand Angular rencontre la balise <app-root></app-root> dans un document html, il
sait qu’il doit en remplacer le contenu par celui du template « app.component.html » en
appliquant les styles du fichier « app.component.css », le tout géré par la logique du
fichier « app.component.ts »

23.  Un composant est une classe qui possède:
 Des attributs : relatives aux données manipulés par le composant.
 Des méthodes : relatives aux fonctions qui manipulent les
attributs de la classe.
 Des méthodes créés par l’utilisateur
 Des méthodes prédéfinies : ngOnInit, …
23

24.  Objectif :
 Création d’un composant «header»
 Création du composant «footer»
 Affichage des composants «header» et «footer»
24
header
footer
app

25. 25
import { Component } from '@angular/core';
@Component({
selector: 'app-footer',
standalone: true,
imports: [],
templateUrl: './footer.component.html',
styleUrl: './footer.component.css’
})
export class FooterComponent {
}
footer.component.ts
<div>GLSI2 - ISTIC</div>
footer.component.html
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
standalone: true,
imports: [],
templateUrl: './header.component.html',
styleUrl: './header.component.css’
})
export class HeaderComponent {
}
header.component.ts
header.component.html
<div> <H1>Mini Projet Web </H1></div>
Noms des balises
des composants

26. 26
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, HeaderComponent , FooterComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css’
})
export class AppComponent {
}
Ajout des noms des
composants à utiliser
app.component.ts

27. 27
<!-- Affichage du header : par son sélecteur-->
<app-header></app-header>
<p> Ce contenu est créé dans le composant principal </p>
<!-- Affichage du footer : par son sélecteur-->
<app-footer></app-footer>
app.component.html

28. 28
Chaque composant possède une balise (un sélecteur) qui lui
est spécifique permettant de l’afficher dans une page HTML

29.  Les directives Angular sont des fonctions exécuté par le compilateur
Angular
 Elles ont pour objectif de manipuler l’arbre du document HTML
(ajouter un élément, supprimer un élément …)
29

30. 30
D’attribut De composant
structurelles personnalisées
@Component
: responsable
de la création
de composant
Ajoute ou
supprime un
élément à l’arbre
HTML
ngFor, ngIf,
ngSwitch
Modifier le
comportement
d’un élément
existant
(ngModel,
ngStyle…)

31. 31
// le contenu du div sera affiché si la condition est vérifiée
<div *ngIf="condition">Content to render when condition is true</div>
ngIf
(simple)
<div *ngIf="condition; else elseBlock">
Content to render when condition is true
</div>
<ng-template #elseBlock>Content to render when condition is false </ng-
template>
ngIf
(avec bloc
else)
//items : liste quelconque
<p *ngFor="let item of items >
{{item}}
</p>
ngFor

32. Data Binding = échange des données
o Angular a défini 4 sortes de Data Binding pour synchroniser le
Template (.html) et le Component (.ts).
o Il est ainsi possible de propager une donnée du Component vers le
DOM, du DOM vers le Component et dans les deux sens.
o Ces formes de Data Binding sont communément nommées:
Interpolation
Property
Binding
Event
Binding
Two Way
Databinding

33. 33

34. 34
exemple
rôle
symbole
Type
//afficher le titre
{{title}}
Affiche le contenu de
l’attribut (.ts)dans le
fichier Html
{{ nom_attribut}}
Interpolation
(.ts  .html)
//associer valeur de src à
l’attribut image
<img [src]= "image ">
Associe la valeur d’un
attribut_html à un
attribut typescript du
composant
[attribut_html]
Property binding
(.ts  .html)
//click sur bouton affiche une
alert
<button
(cick)="fonction"></button>
Associe une fonction
typescript du
composant à un
évènement event
(event) = "fonction"
Event binding
(.html  .ts)
<input type="text"
[(ngModel)]=’nom_attribut’>
Tout changement
d’un attribute en .ts
sera transmit au
.html et inversement
[(ngModel)] =
nom_attribut
Two Way Binding
(.ts  .html )

35.  Objectif : avoir des composants personnalisable (paramétrables)
 Analogie entre attributs Html et Angular Component
 Les éléments Html peuvent avoir des attributs : Par exemple
 <img src=«….» alt =« …» : l’élément img possède des attributs src et alt
 <button type=«submit»> …</button>
 Les composants Angular peuvent aussi avoir des attributs pour personnaliser
leur fonctionnement
35

36. 36

37. 37
Le composant Produit doit:
 Afficher les détails d’un
produit
 Un bouton qui incrémente l’id
du produit lors de chaque click
 Un input qui modifie la couleur
du background du tableau
 La couleur initiale sera fournit
comme input au composant.
 Le composant principal doit créer 3
produits (des color différentes)

38.  Constructeur :
 Première fonction appelée lors de la création du composant
 c'est à ce moment que les dépendances (services) sont injectées dans le
composant par Angular.
 ngOnInit :
 Le composant doit implémenter l’interface OnInit
 Cette fonction est appelé tout de suite après le constructeur
 Utilisée pour initialiser les attributs du composant.
38

39. Références
 https://angular.io/
 https://blogs.infinitesquare.com/posts/web/le-cycle-de-vie-d-un-
composant-angular
39