Développement Web FrontEnd Framework

Angular 8

Hachicha Hassan
ISET SFAX
hachicha.hs@gmail.com
RAPPELS SUR HTTP
 LE PROTOCOLE HTTP
 HTTP :HyperText Tranfert Protocol
◦ Protocole qui permet au client de récupérer des documents du
serveur
◦ Ces documents peuvent être statiques (contenu qui ne change
pas : HTML, PDF, Image, etc..) ou dynamiques ( Contenu
généré dynamiquement au moment de la requête : PHP, JSP,
ASP…)
◦ Ce protocole permet également de soumissionner les
formulaires
 Fonctionnement (très simple en HTTP/1.0)
◦ Le client se connecte au serveur (Créer une socket)
◦ Le client demande au serveur un document : Requête
HTTP
◦ Le serveur renvoi au client le document (status=200) ou d’une
erreur (status=404 quand le document n’existe pas)
◦ Déconnexion
 Méthodes du protocole HTTP
 Unerequête HTTP peut être envoyée enutilisant les
méthodes suivantes:
◦ GET : Pour récupérer le contenu d’un document
◦ POST : Pour soumissionner des formulaires (Envoyer, dans
la requête, des données saisies par l’utilisateur )
◦ PUT pour envoyer un fichier du client vers le serveur
◦ DELETE permet de demander au serveur de supprimer un
document.
◦ HEAD permet de récupérer les informations sur un
document (Type, Capacité, Date de dernière modification
etc…)
Création des composants Employes et Produits
 Component Inscrit
inscrits.ts + inscrit.html

Controller + viewer

ic e
er v
s
de App.module.ts
on

HttpClientModule
ecti

AppRoutingModule
Inj

FormsModule, 
ReactiveFormsModule

Service Inscrit.service.ts Model

Méthodes : classe Inscrits.ts
• Get
Attributs {
• Post ID:Number 
• Delete   npr: string
• update }
Créer les composants suivants:
Component Inscrits

ng g c Inscrits/listinscrits --spec false

Service Inscrits

ng g s Services/inscrits --spec false

Model Inscrits

ng g class Models/Inscrits –spec false

Fichier Models/inscrits.ts

export class Inscrits {
    ID:Number
    hd:Date
    hf:Date
    npr: string
    email: string
    Type:string
}
Mécanisme du protocole HTTP
 Fichier Services/inscrits.services.ts
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Inscrits } from '../Models/inscrits';

 On déclare une variable url pour l’accés au service

private url='/assets/data/formation.json';

 Dans le constructeur on instance un objet de la classe HttpClient

constructor(private http:HttpClient) { }
 Méthode pour récupération de tous les inscrits
getarticles():Observable<Inscrits[]>
{ 
return this.http.get<Inscrits[]>(this.url);
}
 Fichier app-routing,module.ts

 import {ListinscritsComponent } from './
inscrits/listinscrits/listinscrits.component';

const routes: Routes = [
  {path:'listinscrits',component: ListinscritsComponent}
];
 Fichier listinscrits.component.ts

On doit importer:
La classe service :Services/inscrits.service.ts
La classe Model: Models/inscrits.ts

import { Inscrits } from '../../Models/inscrits';
import { InscritsService } from '../../Services/inscrits.service';
 Fichier listinscrits.component.ts

1- On déclare un tableau d’inscrits et un inscrit-

public inscrits=[];

2- On instance au constructeur le service

constructor(private inscserv : InscritsService) { }

3- Méthode de renvoie de la liste des inscrits

ngOnInit() {

return this.inscserv.getarticles().subscribe(data=>
(this.inscrits=data),
   err=>console.log(err)

}
 Fichier listinscrits.component.html
<table class="table table-hover">
    <thead class="thead-dark">
        <th><tr>ID</th>
        <th>Nom et prénom</th>
        <th>Email</th>
        <th>Heur de début</th>
        <th>Heur de fin</th>

</tr>
   </thead>
    <tbody>
        <tr class="table-
life" *ngFor="let insc of inscrits">
            <td>{{insc.ID}}</td>
            <td>{{insc.npr}}</td>
            <td>{{insc.email}}</td>
            <td>{{insc.hd}}</td>
            <td>{{insc.hf}}</td>
        </tr>
 On doit ajouter dans app.module.ts la ligne suivante

import { HttpClientModule } from '@angular/common/http';

 On enregistre tous et on saisie:

 ng serve
 http://localhost:4200/listinscrits