Vous êtes sur la page 1sur 95

1

Novembre 2019

FORMATION ANGULAR
PAR LA PRATIQUE
Wissem AKROUT
wissemakrout@gmail.com
2

Objectifs
• Maîtriser le framework Angular de Google

• Mise en place de l’environnement de développement

• Comprendre l’architecture Angular

• Maîtriser les bonnes pratiques

• Connaitre les nouveautés de la dernière version


3

Programme de formation
• Introduction générale

• Type script

• Environnement Angular

• Définition des composants

• Définition des dépendances

• Définition des DataBinding

• Définition des Directives

• Gestion des formulaires

• Bonnes pratiques
4

INTRODUCTION GENERALE
5

Historique d’angular
• Angular est un Framework JavaScript Open Source.

• Apparu, la première fois en 2009. Il est créé par Misko

Hevery et Adam Abrons.


• Il est totalement avalé et supporté par Google.

• Il y a toute une rupture entre AngularJS et Angular à partir

de la version 2.0 et les versions qui suivent. 


6

Pourquoi Angular ?
• Angular: Single page application SPA ( application à une

seule page)
• Angular est un framework web côté client open source.

• Angular est basé sur type script

• Angular est dirigé par l’équipe google


7

Avantages d’Angular
Angular est géré par Google il y a donc peu de chances qu’il

disparaisse.
Communauté active : mise à jour tous 6 mois, 1à 3 mise à jour

mineurs pour chaque livraison majeur et des correctifs chaque


semaine.
TypeScript : ce langage permet un développement beaucoup plus

stable, rapide et facile.


Multipaltforme: le framework permettant le développement

d’applications multi-plateformes à partir d’une seule base de code.


8

Aperçu sur les différentes versions d’Angular (1)


• Angular 8 appartient à Google. La version stable a été mise à
jour le 18 Mai 2019.
• Ci-dessous la liste des versions angulaires publiées à ce jour

Version Date de parution


Angular JS Octobre 2010
Angular 2.0 Sept 2016
Angular 4.0 Mars 2017
Angular 5.0 Novembre 2017
Angular 6.0 Mai 2018
Angular 7.0 Octobre 2018
Angular 8.0 Mai 2019
9

Aperçu sur les différentes versions d’Angular (2)

• Les dates de publication des deux prochaines versions

majeures d’Angular sont indiquées ci-dessous


Version Date de parution
Angular 9.0 Novembre 2019
Angular 10.0 Mai 2020
10

Différence entre Angular 1 et 2


Angular JS (Angular 1.0) Angular 2.0
C'est un framework d'application de C'est une version rectifiée d'AngularJs
composant Web open-source basé sur entièrement basée sur TypeScript
JavaScript
Architecture basée en MVC (Model View Architecture entièrement basée sur les
Controller ) Composants
Il n'est pas compatible avec les nouveaux Il prend en charge tous les composants
composants Web tels que les éléments Web, y compris les éléments
personnalisés. personnalisés.
Pas de support pour les applications Il est facile de créer des applications
natives pour la plateforme mobile natives pour plate-forme mobile
Il y a des problèmes avec les injections de Il est livré avec un sous-système
dépendance dans Angular JS d'injection de dépendance intégré pour de
meilleures performances
Les contrôleurs et $ scope sont des Les contrôleurs et $ scope sont remplacés
composants clés du développement par des classes et des dérivés dans
d'applications dans AngularJS Angular 2.0
11

PARTIE 2: TYPE SCRIPT


12

Plan
• Présentation du langage typescript

• Pourquoi écrire le code en typescript et non pas en javascript ?

• Installation et configuration de typescript 

• Types des données dans typescript

• Les expressions intégrées

• Les fonctions

• Les classes

• Héritage

• Les accesseurs
13

Présentation du langage TypeScript


• TypeScript est un langage de programmation, très récent, créé par

Microsoft en 2012 afin de faire extension à JavaScript.


• Le but est de trouver un langage côté client qui est au même temps

un langage orienté objet.
• TypeScript est un langage transcompilé en JavaScript.

• Finalement, le gain que nous apporte TypeScript est que nous

sommes entrain d'écrire du JavaScript avec un Syntaxe orienté


objet.
• Améliorer la productivité de développement d’applications

complexes.
14

Pourquoi écrire le code en TypeScript et non pas en


JavaScript ?
• TypeScript est un superset (Sur-ensemble) de JavaScript (c'est-à-dire que

tout code JavaScript peut être utilisé avec TypeScript).

• TypeScript va ajouter l'aspect orienté objet à JavaScript et d’autres

fonctionnalités.

• Possible d'écrire des classes, des interfaces, déclarer des Types au lieu

d’utiliser simplement le fameux mot clé “var” et les fonctions JavaScript.

• Il est possible, aussi, de faire l'héritage et de déclarer des constantes et des

types génériques.

• Il supporte la spécification ECMAScript 6 ou 7 et des versions plus récentes.

• Dans Angular 2,4,7 ... Nous utilisons ces nouvelles fonctionnalités.


15

Installation et configuration de typescript

• TypeScript est un langage qui sera converti en JavaScript

Donc a besoin d’un compilateur.


• il faut installer un compilateur avant de commencer le travail.

• Plusieurs méthodes pour installer TypeScript sur votre

machine ou serveur:
• A travers l’installation du plugin TypeScript sur Visual Studio mais à

partir de la version 2015 Visual studio contiennent par défaut


TypeScript.
• A travers npm (the Node.js package manager).
16

Types des données dans TypeScript


• Javascript est un langage non fortement typé mais dynamique.

Le type des données n’est identifié qu’à l’exécution du programme. 


• TypeScript introduit la notion d’un typage un peu plus fort que pour

le langage Javascript. Ce typage se manifeste par l’ajout de


plusieurs types de bases ainsi qu’un typage statique.
• Rappelons qu’un langage est dit de typage statique quand celui-

ci vérifie les types des variables à la compilation, alors qu’un


langage dit de typage dynamique, effectue cette vérification à
l’exécution.
17

Syntaxe du typage
• Déclaration des variables

let variable: type;


• Exemple

 let myVar: boolean;

 let myVarinitialize: number = 2;

 let bar = "hello world";

var mavariable= 123;
18

Mot clé “let”


• var mavariable= 123;
if (true) {
   var mavariable= 456;
}
console.log(mavariable); //le résultat est: 456 et non pas 123
• mavariable a changé sa valeur dans tout le programme, car les
accolades { } du if ne font pas la restriction des instruction.
• let mavariable= 123;
if (true) {
   let mavariable= 456;
}
console.log(mavariable); //le résultat est: 123 et non pas 456
• mavariable a changé sa valeur seulement à l'intérieur du bloc
if(true) par la suite elle a repris sa valeur initiale (123) en dehors.
19

Les types de bases (1)


TYPE DE DONNÉES MOT-CLÉ DESCRIPTION
Il est utilisé pour représenter à la fois des
Number number nombres entiers et des nombres à virgule
flottante.
Boolean boolean Représente true et false
Il est utilisé pour représenter une séquence
String string
de caractères
Généralement utilisé sur les types de retour
Void void
de fonction
Il est utilisé lorsqu'un objet n'a aucune
Null null
valeur
Indique la valeur donnée à la variable non
Undefined undefined
initialisée
Si la variable est déclarée avec any,
Any Any n'importe quel type de valeur peut être
affecté à cette variable
20

Les types de bases (2)


Exemples:
• let a: null = null;
• let e: undefined = undefined;
• let f: boolean = true;
• let anInt: number = 6;
• let decimal: number = 2.9;
• let hex: number = 0xa5d2; // Hexa-Decimal
• let binary: number = 0b1010; // Binaire
• let octal: number = 0o762; // Octal
• let simple: string = 'string simple quote';
• let double: string = "string avec double quote";
21

Les types de bases (3)


• ARRAY: Il existe deux manières équivalentes de définir les types de
tableau: Array et T[]
let names: string[] = [“Pierre”,”Paul”,”Jaques”];
let otherNames: Array<string> = [“Pierre”,”Paul”,”Jaques”];
• Objet: Un objet est une instance qui contient un ensemble de paires
clé-valeur. Les valeurs peuvent être des valeurs scalaires ou des
fonctions ou même un tableau d'autres objets.
var object_name = { key1: “value1”, //scalar value key2: “value”, key3:
function() { //functions }, key4:[“content1”, “content2”] //collection };
• ENUM
enum Couleur{Red = 0, Blue, Green }
let c: Couleur= Couleur.Red;
Par défaut, la première valeur de l’enum sera 0, toutefois il est possible
de préciser la valeur de chaque élément de l’enum.
22

Les Expressions Intégrées


• Les variables dans TypeScript peuvent êtres déclaré de deux

façons (Explicite ou implicite).


 Explicite : il faut mentionner le type de la variable à déclarer

Var foo: number = 123;


 Implicite : la variable prend le type de sa valeur.

var foo = 123;
foo = 'Bonjour'; //Erreur

 Ici la variable foo est implicitement un number (entier) 


23

Les fonctions
• Une fonction est un ensemble d'instructions pour effectuer
une tâche spécifique. Les fonctions organisent le
programme en blocs de code logiques. Une fois définies, les
fonctions peuvent être appelées pour accéder au code.
• Les fonctions facilitent la lecture et la maintenance du code
du programme.
• Une déclaration de fonction indique au compilateur le nom,
le type de retour et les paramètres d'une fonction. Une
définition de fonction fournit le corps réel de la fonction.
type de retour d’une fonction
function startRace(race: Race): Race { function startRace(race: Race): void {
race.status = RaceStatus.Started; race.status = RaceStatus.Started;
return race; }
}
24

Les classes
• On peut définir une classe en respectant la structure suivante:

export class Batiment {
   hauteur: number;
   largeur: number;
   constructor(x: number, y: number) {
       this.hauteur = x;
       this.largeur = y;
   }
   add(Batiment : b) {           // une méthode add(,)
       return new Batiment (this.x + b.x, this.y + b.y);
   }
}
var p1 = new Batiment (0, 10);
var p2 = new Batiment (10, 20);
var p3 = p1.add(p2); // Result est {x:10,y:30}
25

Héritage
• Dans TypeScript comme dans C# ou Java il supporte
l'héritage simple et non pas multiple. L'héritage se fait en
utilisant le mot clé « extend »
export class Maison extends Batiment {
    static nbTotalMaisons = 0
   nbChambres: number;
   constructor(x: number, y: number, z: number) {
       super(x, y);
       this.nbChambres = z;
   }
 }
TypeScript nous donne la possibilité, aussi, de déclarer des
variables globales en utilisant le mot clé static. 
26

Les accesseurs
• Type Script supporte les accesseurs suivants: (public,
protected et private).

Si l’accesseur n’est pas mentionné, donc il sera public


par défaut. 
27

PARTIE 3:ENVIRONNEMENT
ANGULAR
28

Plan
• Installation des outils

• Création du premier projet

• Structure du Projet

• Ajouter Bootstrap

• Components Dans Angular

• Différence entre ngOnInit() et Constructor


Installation des outils (1)
• NodeJS: est une plateforme logicielle libre et événementielle
en JavaScript.
• On l’utilise pour compiler et exécuter du Code TypeScript.
• installer NodeJS à partir de ce lien: Site officiel NodeJS.
• Pour vérifier que NodeJS est bien installé il suffit de lancer
cette commande à partir de votre Terminal (cmd). NodeJS -V
• NPM: NPM est un package manager qui installe les
dépendances.
• NPM a le rôle de trouver les packages nécessaires et il les
installes dans le répertoire de l’application. 
• Pour l’installer, ouvrez une ligne de commande et tapez la
commande suivante :
npm install -g npm@latest
30

Installation des outils (2)


• Angular/CLI: commande ligne interface
• pour créer un projet angular on doit être servie par cli qui
vient d’être installer sur la machine
• On installe le CLI par commande suivante:
npm install -g @angular/cli
 la commande  ng  est disponible depuis la ligne de
commandes depuis n’importe quel dossier de l’ordinateur.
Wissem AKROUT 31

Création du premier projet


• Pour créer un nouveau projet Angular, naviguer vers le
dossier souhaité depuis une ligne de commande
et saisir la commande suivante :
ng new formation-angular --style=scss --skip-tests=true
• Ensuite, naviguer dans le dossier du projet et lancer le
serveur de développement :
cd formation-angular
ng serve –open (compilation et lancement du serveur)

 localhost:4200 dans votre navigateur et voila votre


environnement de travail est prêt.
32

Structure du Projet
33

Dossier d’un projet Angular


• e2e : ce dossier stock des scripts pour effectuer des 

tests unitaires, un ensemble d'énoncé et d'instruction qui


permettent de vérifier que son code fonctionne bien selon un
certain cahier des charges.

• node_modules : c'est dans ce dossier que sont installés tous les

plugins Node installé via npm.

• src : c'est dans ce dossier seront stockés nos fichiers sources, le

code quoi. C'est dans ce dossier que l'on passera 99% du temps.
34

Fichiers de configuration
• Dans Angular, nous avons plusieurs fichiers de
configuration à savoir:
• Package.json: C’est un fichier de configuration NPM. Il
contient des configurations Angular. Ces configurations
permettent d’installer les autres packages en relation, en
utilisant NPM.
• tsconfig.json: Tous les fichiers TypeScript (*.ts) seront
compilés et convertis vers des fichiers JavaScript(*.js). Ce
que permet, aux différents navigateurs, de lire ces
fichiers. Pour assurer cette action on fait appel au fichier
tsconfig.json.
35

Fichiers de l’application
• Styles.css: est un simple fichier css permettant de créer
des styles pour notre application Angular.
• Index.html: c’est notre page de démarrage. Elle contient
les appels vers les components Angular.
36

Dossier de l’application
• app.component.ts On commence par créer un fichier
pour notre component. Chaque composant doit être
nommé comme suivant NomComponent.component.ts.
Comme notre component est app donc il fallait créer un
fichier app.component.ts
• app.module.ts: Angular est modulaire. Chaque module
est composé par un ensemble des components. Dans
chaque module on déclare les components qui sont
exposables.
• main.ts : est le fichier de démarrage. Il permet de définir
les modules avec l’application qui va démarrer.
37

Angular Comment ça fonctionne exactement

• Pour commencer l'édition de votre projet, rendez-vous


dans le noeud src/app puis ouvrir le fichier
app.component.html
38

Angular Comment ça fonctionne exactement


• app.component.html: est le fichier html du component
on appelle ça la “Template” du component.
• app.component.ts: est la définition du composant. C'est
le fichier qui contient le code source. En fait la template
cherche les propriétés bindées dans ce fichier.
39

Angular Comment ça fonctionne exactement


• Si vous regardez dans la définition du component on a
défini la propriété “selector” du component à “app-root”.
40

Conclusion
• Angular charge par défaut la page Index.HTML. Puis

Angular cherhe les balises qui correspondent à des


components. S'il trouve une basile comme dans notre
cas: <app-root>. Il cherchent dans tous les component
jusqu'à trouver celui qui à la propriété selector = app-root.
Si le component est trouvé il le charge avec sa template.
41

Ajouter Bootstrap
• Pour rendre notre projet plus efficace plus simple et plus vite
et facilité la mise en page on va utiliser le bootstrap.
 avoir une mise en page propre et efficace.
• Bootstrap est une bibliothèque css très connue. Pour
l'integrer dans notre projet, on a besoin de la télécharger et
l’installer sur le projet.
• npm install bootstrap --save
• pour ajouter le bootstrap à notre projet on doit ajouter cette
ligne dans le fichier angular.json
• "styles": [ "node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
42

Scénario complet

• Angular cherche main.ts


• A l’interieur de “main.ts” il cherche le module à déclencher
(Dans notre cas: AppModule)
• il cherche le fichier de ce module (dans notre cas c’est
app.module.ts)
• à l'intérieur de “app.module.ts” il cherche le component à
déclencher (dans notre cas c’est appComponent)
• comme on a déjà vu, le component est composé par une
definition, template … tout ça donne le rendu visuel final.
43

Components Dans Angular


• Angular se base essentiellement sur les composants ou bien en
anglais “Components”.
• Les components dans Angular sont des directives qui sont
toujours associé à une template HTML spécifiée.
• La connection entre le code et la template HTML dans les
components du Angular permet de résoudre des problèmes et
des notions très nécessaires dans AngularJS comme la notion
du “$scope”.
• Les components dans Angular ont un cycle de vie qui peut être
personnaliser. En fait les méthodes ngOnInit() et ngOnDestroy()
peuvent être surchargées et ça permet de personnaliser très
simplement le comportement des composants. Tout ça vous
donne un contrôle total sur votre component.
44

Créer son premier component


• Les components sont attaches au composant principal
“AppComponent”.
• Parmi les règles à respecter (bon pratique) c’est de créer
un dossier pour chaque nouveau component.
ng generate component dataBinding/mon-premier
45

Créer son premier component


• maintenant jetant un coup d’oeil sur le fichier index.html).
là, on fait appel à <app-root> qui est le selector de notre
component. Donc notre page principale index.html va
chercher le component ayant ce nom et elle le charge.
46

Créer son premier component


• CLI a créé un nouveau sous-dossier  mon-premier  et y a
créé un fichier template, une feuille de styles et une
classe type script.
• Le CLI nous prévient également qu'il a mis à jour le fichier
 app.module.ts.
• Dans mon-premier.component.ts le CLI a créé un
sélecteur :  app-mon-premier.
47

Différence entre ngOnInit() et Constructor


• Le constructeur fait partie de ECMAScript. Par contre
ngOnInit est une notion d'angular.
• On peut appeler le constructeur dans toutes les classes
même si on n'utilise pas Angular.
• LifeCycle: On appelle le constructeur avant ngOnInt()
• Dans le constructeur on ne peut pas appeler des
éléments HTML. Par contre dans ngOnInit() we can.
• Généralement, si on a besoin, on fait les appels des
services dans la ngOnInit() et non pas dans le
constructeur.
48

DATABINDING
49

Plan
• Introduction
• Types du DataBinding :

 Du component vers la template


 De la template vers le component
 Les deux sens (NgModel)
50

Introduction
• Le databinding est l’une des fonctionnalités les plus
impressionnantes dans Angular.
• Il s’agit d’un mécanisme qui permet la synchronisation
instantanée entre la vue (HTML Template) et les données
de l’application.
• Il permet de faire la communication entre le component et
sa template.
• Angular propose plusieurs types du databinding qui seront
utilisés selon le besoin.
51

Types du DataBinding
• Il y a trois sens pour le flux:
1. Du component vers la template
2. De la template vers le component
3. Dans le deux sens (si on change dans le html donc la
valeur du component change et inversement si suite à
un traitement, la valeur du component ou sa propriété
change donc le navigateur et l’affichage se rafraîchit
automatiquement et instantanément).
TYPES DU
DATABINDING
1. Interpolation:
{{ NomProp }}
Uni-Directionnel Du modèle -> Template
2. Property Binding:
[property] = “data”

3. Event Binding
Uni-Directionnel Du Template -> Modèle (Exemple: l'événement TextChanged) * (click) = "......."
*  on-click

4.Two-WAy-
DataBinding
Bi-Directionnel S’il change dans l’un, la modif se répercute instantanément input [( ngMod
el )]= "nombre
Personnes" >
53

Interpolation (Sens: du component vers l’affichage)

• C'est un type de databinding du Modèle vers la template.


• Il suffit, tout simplement, de mettre le nom de la propriété
du component dans double accolades ouvrantes et
fermante comme suivant {{ }}.
BINDING DES
ÉVÉNEMENTS (SENS:
DE L’AFFICHAGE VERS
LE COMPONENT)
Dans les deux cas précédents (Interpolation et
PropertyBinding), l’envoi des données est uni-
directionnel et c’est du component vers la template.
Maintenant on va étudier un autre binding
unidirectionnel mais dans le sens inverse.
C.a.d comment envoyer des données à partir de la
template vers le component.
55

Binding Bidirectionnel en utilisant NgModel (Dans les deux sens)

• Le Binding Bidirectionnel permet de faire une


synchronisation instantanée entre la template et la valeur
de la propriété du component. Cette synchronisation est
dans les deux sens.
• NgModel est une directive très utilisée dans Angular.
• Important: Pour que le binding bidirectionnel fonctionne, il
faut obligatoirement importer FormsModule dans le fichier
Module associé.
56

Binding Bidirectionnel en utilisant NgModel (Dans les


deux sens)
• on commence par importer FormsModule dans le fichier
app.Module.ts

• le data binding Bidirectionnel est la combinisons des deux


Bindings précédents. Même à l'écriture : [propertyBinding]
+ (eventBinding) = [(dataBinding)].
57

DÉCORATEURS DANS
ANGULAR
58

Introduction(1)
• Elle permet d’assurer les canaux de communication entre
les différents components, dans les deux sens (du fils
vers parent et vis versa).
• La question qui se pose: Comment deux components
peuvent se communiquer ? comment, le deuxième
component peut répondre à la demande du premier ? le
deuxième component, comment peut-il envoyer des
objets en tant que réponse à la demande.
 On va utiliser les décorateurs dans le cadre de la
communication inter-components et pour d’autres
besoins.
59

Introduction(2)
• D’une manière simplifiée “Decorators” sont des fonction
préfixées par le symbole “@”.
• Les Decorators permettent d’ajouter une condition ou une
information sur (classe, propriété, méthode, ou
paramètre) auquel il est appliqué.
• On a déjà utilisé le décorateur @component qui permet
d’ajouter des informations sur le component comme le
‘selector’, templateUrl, styleUrls ….
60

@Input decorator
• On utilise @input pour dire que cette propriété est une
entrée (input) pour ce component.
• On déclare une propriété. Puis on ajoute le décorateur
@input pour dire que notre component peut recevoir des
messages à travers cette propriété.
un component A, possède une propriété décorée par un
input, alors un component B peut communiquer avec A en
modifiant la valeur de la propriété.
• @input, peut décorer n’importe quel type de propriété
(number, string, array ou même un objet défini par le
développeur).
61

@Output decorator
• le décorateur @Output est très similaire à l’input sauf que
l’output est utilisé dans l’autre sens de la communication.
c.à.d que le deuxième component peut répondre le
premier component.
• Un point particulier avec ce décorateur: Il est toujours
bindé à une propriété de type “EventEmitter”.
• Exemple: la propriété suivante “Prop” est visible chez le
component émetteur avec le nom suivant “MaProp”.
Notez bien que cette propriété utilise EventEmitter pour
retourner un string.
62

Cas Pratique
• On commence par créer les components Enseignant et
Étudiant

On commence par envoyer la question de l’enseignant à son étudiant.


63

Cas Pratique
• Etape 0:

Etape 1: Créer le component parent (Enseignant). Dans la définition du


component on ajoute quelques propriétés (nom de l’enseignant, sa question
et la bonne réponse attendue):
64

Cas Pratique
• dans la template, on remarque bien qu’on appelle le
component Etudiant.
•  On déduit que le deuxième component contient une
propriété “QuestiondeMonEnseignant” qui est blindée [] à
la propriétée Question du component enseignant.
65

Cas Pratique
• Etape2:
On commence par faire les importations. Puis on créer
une propriété NomEtudiant qui contient le nom de
l'étudiant et l’autre propriété “QuestiondeMonEnseignant”
66

Cas Pratique
•  On va implémenter le code nécessaire pour que
l'étudiant répond à la question. Puis l’enseignant va
recevoir cette réponse et évalue si elle est juste ou non. 
• On ajoute les propriétés suivantes: “ReponseEtudiant” et
“IsBonneReponse” et une fonction “saveData(number)”
qui permet récupérer la valeur saisie dans le champ text
puis elle évalue “IsBonneReponse”.
67

Cas Pratique
• Sur la template du component Enseignant: N’oubliez pas
que ce component attend le retour du component
Etudiant. Pour ceci, on ajoute “(ReponseEvent) =
"saveData($event)"”.
• On constate que “ReponseEvent” est un EventEmitter
dans le component Etudiant. Puis on appelle la fonction
saveData() qui récupère la réponse de l'étudiant et
l’affiche.
68

Cas Pratique
• On passe au component “Etudiant” pour voir comment on
récupère les inputs saisis.On note bien qu’à la ligne 6 de
la template, la propriété “ReponseSaisie” reçoit la réponse
de l'étudiant. Puis à la ligne 7, le bouton appelle la
fonction addReponse().
69

Cas Pratique
• Dans la définition du component “Étudiant” la tâche est
simple. à la Ligne 19, on crée un eventEmitter décoré par
l’attribut @Output. Puis la propriété “ReponseSaisie”.
• Finalement à partir de la ligne 21, la méthode qui sera
exécuté par le bouton ‘Envoyer Réponse’ : Notez bien
qu’on utilise la fonction .emit() pour pousser la réponse de
l'étudiant vers l’enseignant.
70

FORMULAIRES DANS
ANGULAR
71

Introduction
• Dans Angular à partir de la version 2, voir jusqu’à la
version 7 et même après, on peut distinguer deux types
de création des formulaires.
• Template-Driven Forms : souvent est la méthode la plus
utilisée pour la création et la gestion des formulaire.
• Cette approche est appelée l’approche de AngularJS. Car
c’est la même utilisée dans AngularJS. Cela ne signifie
pas qu’elle est moins bonne.
• Reactive Forms: C’est la moins utilisées mais la plus
façonnable et flexible.
72

Template-Driven Forms
• Cette approche se base essentiellement sur deux directives
“ngModel” et “ngForm”.
• ngForm
Elle est utilisée dans votre balise HTML <form
ngForm=“...”></form> pour exporter les valeurs saisies et les
etats“ngForm” des validateurs vers la partie background. Donc,
à partir du component, si on veut chercher qu’est ce qu’un user
a saisi donc on récupère “ngForm” et on cherche dans cette
collection les valeurs des inputs souhaitées.
• ngModel
Cette directive est utilisé à l'intérieur de la balise HTML <input
ngModel=“”></input> .Elle est utilisée pour exposer la valeur de
cet input ou même autre control. Donc son rôle est d’enregistrer
ce champ en utilisant l’attribut “name”.
73

Template-Driven Forms
• On commence par faire les importations dans le fichier
appModule. L’importation de “FormsModule”.
74

Cas Pratique
• Dans cet exemple, on va essayer de créer un formulaire
de contact qui permet de collecter quelques information
(Nom, Email et adresse), avec un bouton submit et un
autre bouton Reset.
75

Cas Pratique
• Etape 1: On commence par créer la balise <form>. on passe la
directive “ngForm” dans une variable qu’on l’a nommée #userForm.
Cette variable #userForm sera utilisée comme paramètre de la
fonction ‘onFormSubmit’ qu’on a déjà créé dans la définition du
component.
• Etape 2: pour chaque input, on ajoute la directive “ngModel” et un
attribut “name”. Attention avec “ngModel”, on n’utilise pas ni le
symbole [] ni le symbole (). Si vous n’ajouter pas ngModel à votre
champ ou input , ce champs ne sera plus pris en compte.
• Le bouton submit n’a pas besoin d’une nouvelle fonction particulière
car on a déjà défini la fonction “onFormSubmit(...)”.
Aussi, dans les navigateurs modernes les boutons sont de type
submit. Sinon, vous pouvez ajouter type=“submit”.
• Pour le bouton Reset, on ajoute une fonction pour l'événement (click)
76

Cas Pratique
77

Cas Pratique
• Résultat: Après remplir le formulaire et cliquez sur le
bouton “submit”, si vous inspecter les éléments. cherchez
dans l’arborescence pour “value” Ainsi vous allez trouvez
simplement les données que vous avez saisies
manuellement.
78

CRUD AVEC ANGULAR


79

Création d’un nouveau projet


• On va créer un nouveau projet
• ng new employee-app
• On va installer le bootstrap dans notre application
• npm install bootstrap --save
• pour ajouter le bootstrap à notre projet on doit ajouter
cette ligne dans le fichier angular.json
• "styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
80

Configuration des routes


• On va créer un component pour afficher la liste des
employers
• ng g c employees/list/listEmployees --spec false
• On va créer un component pour la création d’un nouveau
employer.
• ng g c employees/create/createEmployee --spec false
• Puis on va ajouter les routes nécessaires pour naviguer
entre les components.
 Pour cela on doit modifier le fichier app.module.ts
81

• import { BrowserModule } from '@angular/platform-browser';


• import { NgModule } from '@angular/core';
• import { AppComponent } from './app.component';
• import { ListEmployeesComponent } from './employees/list-employees.component';
• import { CreateEmployeeComponent } from './employees/create-employee.component';
• // Import RouterModule
• import { RouterModule,Routes } from '@angular/router';

• const appRoutes: Routes = [


• { path: 'list', component: ListEmployeesComponent },
• { path: 'create', component: CreateEmployeeComponent },
• { path: '', redirectTo: '/list', pathMatch: 'full' }
• ];

• // To let the router know about the routes configured above,
• // pass "appRoutes" constant to forRoot(appRoutes) method
• @NgModule({
• declarations: [
• AppComponent,
• ListEmployeesComponent,
• CreateEmployeeComponent
• ],
• imports: [
• BrowserModule,HttpClientModule,
• RouterModule.forRoot(appRoutes)
• ],
• providers: [EmployeeService],
• bootstrap: [AppComponent]
• })
• export class AppModule { }
82

• Dans le fichier app.component.html on doit ajouter le


nav bar pour assurer la navigation entre les deux
composants.
• Aussi il faut ajouter le <router-outlet> 
83

Création de json serveur et du serveur Data


• Installation de json serveur
• npm install -g json-server
• Puis on va créer le fichier Employee.json
• {
• "employees": [
• {
• "id": 1,
• "firstName": "Ahmed",
• "lastName": "Sfax",
• "email": "ahmed@gmail.com",
• "age": "20",
• "adress": "Tunisie"
• },
• {
• "id": 2,
• "firstName": "Amin",
• "lastName": "Sousse",
• "email": "amin@gmail.com",
• "age": "20",
• "adress": "Tunisie"
• },
• {
• "id": 3,
• "firstName": "Manel",
• "lastName": "Tunis",
• "email": "manel@gmail.com",
• "age": "20",
• "adress": "Tunisie"
• }
• ]
• }
84

• On va démarrer le serveur par la commande suivante:


• json-server --watch Employee.json
• Le json serveur est démarrer sur le port 3000 et l’URL
suivante: http://localhost:3000/employees
85

Installation du HttpClient
• On doit ajouter le http module dans le app.module.ts
86

Employer Entité
• Création de l’entité Employer
87

Création du service
• Dans notre projet employer on va créer
employee.service.ts
88

• Puis le création du fichier list-employees.component.ts


89

• Puis pour la partie affichage on va modifier le fichier list-


employees.component.html
90

Lancement du projet
• En fin on fait le build et on lance le serveur par la
commande ng serve et dans le navigateur avec l’adresse
suivante:  http://localhost:4200/ on affiche la page
suivante
91

ANGULAR MATERIAL
92

Ajouter Angular Material


• Soit par la commande suivante:
• ng add @angular/material
93

Ajouter Angular Material


• Soit par la commande suivante
• npm install --save @angular/material @angular/cdk
@angular/animations hammerjs
Þ Dans ce cas on va installer tous les packages qui sont en
dépendances du standard google angular material
94

Ajout des dépendances


• Il faut ajouter les entrées suivantes dans le fichier
app.module.ts
95

Ajout des dépendances


• Il faut obligatoirement ajouter la ligne suivante dans le
fichier style.css
• @import "~@angular/material/prebuilt-themes/indigo-
pink.css";
Þ Pour hériter tous les styles css du standard material.
• Il faut obligatoirement ajouter aussi la ligne suivante dans
le fichier index.html
• <link href = "https://fonts.googleapis.com/icon?
family=Material+Icons" rel = "stylesheet">
• => Pour hériter tous les icones du standard material.