Plan

1. Introduction
2. Routage et navigation
3. Les Services
4. Angular Forms
 Introduction
• Framework JavaScript (ou TypeScript)
• Présenté par Google en 2009
• Permettant de créer des applications web et mobiles
▪ Front-End (l’ensemble des éléments visibles et accessibles directement sur une application web ou une application
web mobile)
▪ Single page Application (Une SPA est une application qui contient une seule page HTML (index.html) récupérée du
serveur).
• Respecte l’architecture MVVM (Model-View-ViewModel)
▪ Model : représenté généralement par une classe référencée par la couche d’accès aux données (classe ou interface
TypeScript).
▪ View: contenant la disposition et l’apparence de ce qu’un utilisateur voit à l’ écran, recevant l’interaction avec
l’utilisateur : clic, saisie, survol...
▪ ViewModel: remplaçant du contrôleur dans l’architecture MVC, connecté à la vue par le data binding, représenté
dans Angular par un fichier *.component.ts.
• Angular utilise les langages suivants:
• HTML pour les vues. HTML pour les vues.
• CSS pour les styles.
• TypeScript pour les scripts depuis la version 2.
H

4
 Introduction-Historique
• Angular 1 (Agular JS) :
H

▪ Première version de Angular qui est la plus populaire.

▪ Elle est basée sur une architecture MVC coté client. Les applications Angular 1 sont écrite en Java
Script.
• Angular 2 (Angular) :
▪ Est une réécriture de Angular 1 qui est plus performante, mieux structurée et représente le futur de
Angular.
▪ Les applications de Angular2 sont écrites en Type Script qui est compilé et traduit en Java Script avant
d’être exécuté par les Browsers Web.
▪ Angular 2 est basée sur une programmation basée sur les Composants Web (Web Component)
• Angular 4, 5, 6,7,8,… : sont de simples mises à jour de Angular 2 avec des améliorations au niveau
performances.

5
Architecture de base d’une application Angular

6
 Installation
• Pour installer Angular, il faut télécharger et installer NodeJS (Dernière version stable LTS)
• Pour installer Angular, exécuter la commande
npm install –g @angular/cli
• Pour installer une version bien précise (par exemple 8)
npm install –g @angular/cli@8
• Pour vérifier la version d’Angular installée, exécuter la commande
ng version

➢ npm (node package manager) : le gestionnaire de paquets par défaut pour une application JavaScript.
➢ angular-cli (command line interface) : outil proposé par Google pour faciliter la création et la
construction d’une application Angular en exécutant directement des commandes. 7
 Commandes CLI à utiliser fréquemment
Commandes Besoins

ng version afficher la version de angular Cli

ng new firstApp Créer un projet angular

ng serve (ou npm start) Exécuter un projet

ng serve -o lancer le projet et ouvrir une nouvelle fenêtre dans le

navigateur
ng g component componentName (ng g c componentName), Créer un composant
(ng g c ComponentName - -skip-tests=true)
ng g service serviceName Créer un service

ng g class className Créer une classe

ng g i interfaceName Créer une interface

8
Structure du Projet Angular

Dossier des scripts des tests unitaires

9
Structure du Projet Angular

Declarations : C'est le tableau de composants.

Si un nouveau composant est créé, il sera
importé en premier et la référence sera incluse
dans les déclarations
Imports : C'est un tableau de modules requis
pour être utilisé dans l’application
Providers: Cela va contenir tous les services
crées
Bootstrap : Cela inclut le composant principal
10
de l’application pour démarrer l'exécution
Structure du Projet Angular
Chaque composant se compose principalement des éléments suivants :

• HTML Template : représentant sa vue

• Une classe représentant sa logique métier (.ts)

• Une feuille de style CSS

• Un fichier spec sont des tests

Un composant peut être inséré dans n’importe quelle partie HTML de l’application en utilisant
son sélecteur associé.

Un composant est une classe qui possède le décorateur @Component. Ce décorateur possède
les propriétés suivantes :

• selector : permet de spécifier le tag (nom de la balise) associé à ce composant.

• templateUrl : permet d’associer un fichier externe HTML contenant la structure de la vue

du composant

• styleUrls : spécifier les feuilles de styles CSS associées à ce composant 11

 DataBinding
• Pour insérer dynamiquement des données de l’applications dans les vues des composants, Angular définit des techniques
pour assurer la liaison des données. Property Binding : est une autre technique One Way Binding. Elle permet de
lier une propriété de la vue avec une propriété définie dans le composant.
• Data Binding = Communication
Exemple:

Event Binding : dans Angular , event binding est utilisé pour gérer les événements
déclenchés comme le clic de bouton, le déplacement de la souris, etc. Lorsque
l'événement se produit, il appelle la méthode spécifiée dans le composant.
Exemple:
String interpolation:est une technique
de One Way Binding, elle utilise
l'expression {{ }} pour afficher les
données du composant dans la vue.
Exemple:
Two-way binding : nous avons vu que dans la le One Way Binding, tout changement dans la
vue n'était pas reflété dans le composant. Pour résoudre ce problème, Angular Two Way
Binding.
app.component.html

app.component.ts
Remarque : il faut ajouter « FormsModule» dans le tableau imports du fichier app.module.ts

12
 Les directives Le DOM (Document Object Model) est une interface de
programmation qui est une représentation du HTML d'une page web et
qui permet d'accéder aux éléments de cette page web et de les modifier
• Les directives sont des instructions intégrées dans le DOM. avec le langage JavaScript. Il faut voir le DOM comme un arbre où
chaque élément peut avoir zéro ou plusieurs enfants, qui peuvent avoir
eux-mêmes zéro ou plusieurs enfants, etc…

• Quand Angular lit le template et rencontre une directive qu'il reconnait, il suit les instructions correspondantes.

• La directive *ngFor : elle est très utile dans le cas d’un tableau et qu’on a besoin de répéter un traitement donné.

Exemple : <ul>
<li *ngFor="let p of produits">{{ p.nom }}</li>
</ul>

• La directive *ngIf : est utilisée lorsque vous souhaitez afficher ou supprimer un élément en fonction d'une condition. Prend un
booléen en paramètre. Tout comme nous sommes habitués à d’autres langages de programmation, la directive angular ngIf nous
permet également de déclarer un bloc else. Ce bloc est affiché si l’instruction définie dans le bloc principal put être fausse.
Exemple : <div *ngIf="x%2 != 0 ;else sinon "> impair</div>
…
…
<ng-template #sinon>pair</ng-template> 13
 Les directives
• La directive [ngStyle] : Cette directive permet de modifier le style d’un élément HTML. Elle s’utilise
conjointement avec le property binding pour récupérer des valeurs définies dans la classe.

Exemple: <h4 [ngStyle]="{color: getColor()}">{{produits[0].nom}}</h4>

La fonction getColor() retourne la couleur du titre h4. Cette méthode est développée dans le fichier .ts.

• La directive [ngClass]:permet d’attribuer de nouvelles classes d’un élément HTML. S’utilise conjointement
avec le property binding pour récupérer des valeurs définies dans la classe ou dans la feuille de style.
Exemple:
On définit deux classes rouge et bleu dans app.component.css
.rouge {
color: red;
}
.bleu {
color: blue;
}
Pour associer la classe rouge à la balise <p>
<p [ngClass]="{’rouge’: true}">
{{ nom }}
</p>
On peut aussi appeler une méthode dans la directive ngClass 14
 Les pipes

• Les Pipes sont des filtres utilisables directement depuis la vue afin de transformer les valeurs lors du "binding".

• Il existe plusieurs pipes natives dans Angular comme par exemple DecimalPipe, UpperCasePipe,
CurrencyPipe, etc.

• Exemple: {{nom|uppercase}},{{prix|currency:'TND':'symbol':'2.2-2'}}

• Vous trouverez dans ce lien les pipes natives d’Angular : https://angular.io/api?type=pipe

15
 Introduction au Routage
• En général, on ne cherche pas à afficher tous les composants au même temps dans le bloc
principal.

• On définit plutôt un chemin pour chaque composant.

• Un système de routing permet d’associer une route (url - path) à un traitement particulier.

• Il s'agit des instructions d'affichage à suivre pour chaque URL, c'est-à-dire quel(s)
component(s) il faut afficher à quel(s) endroit(s) pour un URL donné.

• Le routeur angular permet la navigation d'une vue à l'autre lorsque les utilisateurs exécutent
des tâches d'application.

17
 AppRouting module

• Angular-CLI nous propose le module applicatif AppRoutingModule permettant d'ajouter la

fonctionnalité de routage à une application :

✓Routes : est un Array contenant la déclaration des Routes

✓RouterModule : est un module regroupant les directives et les services paramétrables
permettant de remplir la fonctionnalité de routage.

18
 Création d’un système de Routing
• La constante routes représente les chemins à déclarer dans un projet Angular:
➢Chaque objet {path: « url du composant », component: « la class du composant concerné »}

• Intégrer les routes à notre application dans le App-routingModule à travers le

RouterModule et sa méthode forRoot

19
 Application de routage
• Pour appliquer un routage dans une vue ( HTML Template), on a besoin des directives suivantes:
▪ routerLink: c’est une directive prenant en valeur le chemin (path) indiqué dans la table routes

▪ Router-outlet est une directive qui permet de spécifier l’endroit ou la vue va être chargée. Sa syntaxe est
<router-outlet></router-outlet>

• Exemple: Quand l’utilisateur tape http://localhost:4200/accueil , le routeur cherche et charge le composant

AccueilComponent et l’affiche dans un élément <router-outlet></router-outlet> . Cet élément est sensé se
trouver dans la vue du composant racine.

20
 Redirection
• redirectTo: est une propriété ajouté dans l’objet du route pour rediriger une route

• Cette propriété permet d’indiquer vers quelle route le path doit être redirigé.

• Sans la partie pathMatch: ’full’ (pour les

chemins vides), toutes les routes déclarées
après cette dernière ne seront pas
accessibles.
• pathMatch: ’full’ ne laisse donc passer que
les requêtes dont le chemin correspond
exactement au chemin vide
• La deuxième valeur possible pour
pathMatch est ’prefix’

21
Route parametres

ou

22
 Récupération des paramètres
1. Importer ActivatedRoute qui nous permettra de récupérer les paramètres de la route.
2. Injecter ActivatedRoute au niveau du composant. Injection de dépendances: consiste
à créer dynamiquement (injecter) les
3. Affecter le paramètre à une variable du composant dépendances entre les différents
objets en s'appuyant sur une
description (fichier de configuration
• L’affectation peut être faite de plusieurs façons: ou métadonnées) ou de manière
programmatique.
• Méthode 1: un snapshot de l’URL via le ActivatedRoute Ainsi les dépendances entre
composants logiciels ne sont plus
exprimées dans le code de manière
statique mais déterminées
dynamiquement à l'exécution.

ou

• Méthode 2: Via Observable : la fonction subscribe

23
 Récupération des paramètres
• Une autre méthode pour récupérer des données : queryParams
• Les queryParameters sont les paramètres envoyé à travers une requête GET.
• Identifié avec le ?.

24
 Application du route via composant
• Afin de déclencher une route à travers le composant on utilise l’objet Router et sa méthode navigate.
• Cette méthode prend le même paramètre que le routerLink, à savoir un tableau contenant la description
de la route.
• Afin d’utiliser le Route, il faut l’importer de l’@angular/router et l’injecter dans votre composant.

25
 Wildcard route
• Le wildcard route permet de rediriger vers un composant si le chemin indiqué
n’existe pas ( The not found page):

• NB: Il faut faire attention à l’emplacement du Wildcard route

26
 Qu'est-ce un service?
• un service est une classe Type script décorée par @Injectable, qui peut contenir du code réutilisable, ou des données
qu’on veut partager entre plusieurs composants. (Eviter la redondance )

• Un service peut donc :

• Interagir avec les données (fournit, supprime et modifie)

• Faire tout traitement métier (calcul, tri, extraction …)

→Un service est singleton/ global

• Un service est associé à un composant (.ts) en utilisant l’injection de dépendance

• Exemple de quelques services Angular utilisés dans les chapitres précédents :ActivatedRoute, Router

• Exemple d’autre service angular: HttpClient

• Généralement, c’est les service qui interagissent avec la partie back end de l’application en envoyant des requêtes
HTTP.
28
 Création d’un service
• Pour créer un service : ng generate service service-name // ng g s service_name

import { Injectable } from '@angular/core';

@Injectable({

providedIn: 'root'

})

export class TestService {

constructor() { }

• Depuis la version 6 d’Angular, on n’a plus besoin de déclarer les services dans la section providers dans app.module.ts

• L’expression providedIn: ’root’ vaut déclaration

29
 Injection des dépendances

• Lorsque Angular crée un composant, il demande d'abord à un injecteur les services requis.

• Un injecteur maintient un conteneur d'instances de service qu'il a créé précédemment.

• Si une instance de service demandée n'est pas dans le conteneur, l'injecteur en fait une et
l'ajoute au conteneur avant de renvoyer le service à Angular.

• Lorsque tous les services demandés ont été résolus et retournés, Angular peut appeler le
constructeur du composant avec ces services comme arguments.

30
 Exemple d’interaction composant-service
import { Injectable } from '@angular/core';
import { Produit } from '../model/produit';
export class ProduitDetailComponent implements OnInit {
@Injectable({ produit:Produit
providedIn: 'root'
}) constructor(private ar:ActivatedRoute,
export class TestService { private router:Router,
private products:Array<Produit>=new Array<Produit>(); private service:TestService) { }

ngOnInit() {
constructor() { let id:number
this.products.push({id :1,nom :"pc",prix :1200,quantite :20, this.ar.paramMap.subscribe((params)=>{
urlImg :"./assets/images/pc portable.jfif"}); id=+params.get('id')
this.products.push({id :2,nom :"clavier",prix :10,quantite :10, console.log(" "+id+" ");
this.produit=this.service.getProductById(id)
urlImg :"./assets/images/clavier.jfif"});
});
this.products.push({id :3,nom :"souris",prix :5,quantite :0,
urlImg :"./assets/images/souris.jfif"}); }
}
public getProducts(){
return this.products;
}
public getProductById(id)
{
return this.products.find(x=>x.id==id);
}
} 31
 Simulation de la partie backend (json-server)
• L’outil logiciel json-server est une solution simple pour simuler un API REST lors du développement de votre application.

• Pour installer json-server :npm install -save json-server

• Création d’un fichier json (db.json)

{ "produits":[

{"id":1,

"nom":"pc portable",

"prix":1500,

"quantite":20,

"nomImg":"pc portable"

},…]

• Json-server va utiliser cette "base de données" pour stocker les données de l’application

• Pour démarrer le serveur : json-server --watch src/db.json

32
 Postman
• Postman est un logiciel qui va vous permettre d’appeler / tester une API.

• Postman sert à exécuter des appels HTTP directement depuis une interface graphique.

• Vous pourrez simplement choisir l'URL, la méthode HTTP (le plus souvent GET, POST, PUT, PATCH et DELETE), les
headers, les query params et dans certains cas le body de la requête.

• Méthodes http:
▪ GET: les requêtes GET sont celles effectuées par un navigateur lorsque vous entrez une URL dans la barre de
navigation. Elles ont pour but d’aller chercher une page ou de la donnée.
▪ POST: les requêtes POST ont pour but d’envoyer de l’information, contenue dans le body de la requête, vers le serveur.
▪ PUT: les requêtes PUT vont écraser une ressource avec de la nouvelle donnée, là aussi présente dans le body de la
requête. Elle est utilisée pour mettre à jour de la donnée à condition qu’on soit capable de fournir la ressource mise à
jour dans son intégralité.
▪ PATCH: les requêtes PATCH servent également à mettre à jour une ressource mais en ne modifiant que l’élément
envoyé en body de la requête.
▪ DELETE: comme son nom l’indique, la requête DELETE sert à effacer une ressource 33
Exemple

34
 Module HTTP

• Le module permettant la consommation d’API externe s’appelle le module HTTP.

• Un Http Service nous aidera à aller chercher des données externes, poster, etc.

• Nous devons ajouter le module HttpClientModule dans le tableau « imports » du fichier

« app.modules.ts » pour utiliser le service http. ( import { HttpClientModule}
from'@angular/common/http‘;)

• Afin d’utiliser le module HTTP, il faut l’injecter dans le composant ou le service dans
lequel vous voulez l’utiliser: constructor(private http:HttpClient)

35
 Exemple d’un service
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Observable } from 'rxjs';
import { Produit } from '../model/produit';

@Injectable({
providedIn: 'root'
})
export class ProduitService {
Afin d’exécuter une requête get le module httpClient nous offre une
host="http://localhost:3000/produits/" méthode get(). Cette méthode retourne un Observale.
constructor(private client:HttpClient) { }

public getProducts():Observable<Produit[]>{

return this.client.get<Produit[]>(this.host);
}
public getProductById(id):Observable<Produit>
{
return this.client.get<Produit>(this.host+id); endPoint url
} (backend)
public addProduct(produit:Produit):Observable<void>
{
return this.client.post<void>(this.host,produit);
}
}

36
 Utilisation d’un service
ListeProduitsComponent.ts
products:Produit[];
constructor(private service:ProduitService) { }
ngOnInit() {
this.service.getProducts().subscribe(data=>{
this.products=data;
……});
}
DetailsComponent.ts
product:Produit
constructor(private service:ProduitService, private ar: ActivatedRoute) {
}
ngOnInit() {
let id:number
this.ar.paramMap.subscribe((params)=>{
id=+params.get('id')
this.service.getProductById(id).subscribe(data=>{
this.product=data;
})
}); 37
 Introduction
Angular propose deux types de forms :
Template driven forms (piloté par le template) : Reactive forms :
- Basé sur ReactiveFormsModule
- Utilisant FormsModule
- robuste,
- Basé sur les directives (ngmodel) - Évolutif,
- Conçu pour les applications nécessitant des
- Facile
contrôles particuliers.
- Conseillé pour les formulaires simples
• Form Group

• Form Builder
 Template Driven Forms - ngModel
• Importer le module FormsModule dans module.ts

• Angular détecte automatiquement un objet form à l’aide de la balise FORM. Cependant, il ne

détecte aucun des éléments(inputs). <form></form>

• Spécifier à Angular quel sont les éléments à gérer:

• Pour chaque élément, ajouter la directive angular ngModel. Ceci permet de lier la valeur
des contrôles HTML (entrée, selection, zone de texte) aux données de l’application.
• Attention, Si vous n’ajouter pas ngModel à votre champ ou input , ce champs ne sera
plus pris en compte.
• Identifier l’élément avec un nom (name) permettant de le détecter et de l’identifier dans le
composant.

<input type="text" ngModel name="nom"

 Template Driven Forms- ngForm
La directive NgForm complète l'élément form avec des fonctionnalités supplémentaires. Il contient les contrôles que vous avez
créés pour les éléments avec une directive ngModel et un attribut name et surveille leurs propriétés, y compris leur validité.

• Attribuer la valeur ngForm à une référence locale (#nomFormulaire) et la passer à votre méthode. Cette
méthode sera invoquée lorsque nous soumettons ((ngSubmit)) le formulaire.

<form (ngSubmit)=" onsubmit(f)" #f=ngForm></form>

• Avec ngModel, la valeur de l'attribut name deviendra une clé de l'objet de référence ngForm f que nous
avons créé.

• Par exemple, f.value.nom stockera la valeur de contrôle pour l'identifiant du nom.

import { NgForm } from '@angular/forms’;

…
onsubmit(f:NgForm)
{console.log(f.value); …}
 Template Driven Forms - Validation
• Afin de valider les propriétés des différents contrôles, Angular utilise des attributs et des directives

• Outre l’attribut required, attribuer la directive "ngModel" à une variable locale (ex: #myVar="ngModel").

<form (ngSubmit)="onsubmit(f)" #f=ngForm>

…
<input type="text"
ngModel
name="nom"
required
#nom="ngModel"
>
 Template Driven Forms - Validation
• L'utilisation de ngModel dans un formulaire vous indique, par exemple, si l'utilisateur a touché le
contrôle et si la valeur est invalide.

<form (ngSubmit)="onsubmit(f)" #f=ngForm>

…
<input type="text"
ngModel
name="nom"
required
#nom="ngModel"
>
<span style=color:red *ngIf="!nom.valid && nom.touched">Entrez le nom</span>
 Template Driven Forms - Validation
• La propriété valid de ngForm permet de vérifier si le formulaire est valide ou non en se basant sur les
validateurs qu’ils contient.

<form (ngSubmit)="onsubmit(f)" #f=ngForm>

…
<input type="text"
ngModel
name="nom"
required
#nom="ngModel"
>
<span style=color:red *ngIf="!nom.valid && nom.touched">Entrez le nom</span>
…
<button [disabled]=!f.valid class="btn btn-success">Ajouter</button>

• Ici, f.valid renverra false sauf si tous les éléments du formulaire réussissent leurs contrôles de
validation respectifs. Le bouton d'envoi sera désactivé jusqu'à ce que le formulaire soit valide.