IAI-TOGO
PROGRAMMATION JAVA EE
TROISIEME ANNEE GENIE LOGICIEL ET SYSTEMES
D’INFORMATION
AMEVOR Kossi A.
Année académique 2023-2024
PARTIE 2
1
AMEVOR Kossi A.
DEVELOPPEMENT WEB FRONT-END :
FRAMEWORK ANGULAR
II.1 Concept de base
II.1.1 Introduction
Angular permet de créer la partie front-end des application web de type SPA
(Single Page Application)
Une SPA est une application qui contient une seule page HTML ([Link])
récupérée du serveur.
Pour naviguer entre les différentes parties de l’application, JavaScript est utilisé
pour envoyer des requêtes http (AJAX) vers le serveur pour récupérer du
contenu dynamique au format JSON.
Ce contenu JSON sera affiché coté client, dans la même page, en utilisant
HTML et CSS.
Partie front-end Partie back-end
Client web Serveur web
JSON
Back-end
Front-end
API REST SGBD
Angular, React HTTP
JEE, PHP, .NET
II.1.2 Versions de angular
❖ Angular I (Angular JS)
Première version de Angular qui est la plus populaire,
Elle est basée sur l’architecture MVC côté client. Les applications
Angular I sont écrites en JavaScript,
2
AMEVOR Kossi A.
❖ Angular 2+ (Angular)
C’est une réécriture de Angular I qui est plus performante, mieux
structurée et représente le futur de Angular.
Les applications de Angular 2+ utilisent le langage TypeScript
(langage OO), qui est compilé et traduit en JS avant d’être exécuté par
les navigateurs.
Angular 2+ est basée sur une programmation basée sur les composants
Web.
II.2 Mise en place d’une application angular
II.2.1 Installation
Pour créer des applications Angular, il faut installer les outils suivants :
Node JS : [Link]
Node JS installe l’exécutable npm (Node Package Manager) qui permet
de télécharger et installer des bibliothèques JS,
Installer ensuite Angular CLI (Command Line Interface) qui permet de créer,
compiler, tester et déployer des projets angular : [Link]
npm install –g @angular/cli (installe la dernière version de angular)
npm install -g @angular/cli@version_à_installer (installe une version
quelconque de Angular)
Pour désinstaller globalement Angular CLI, on utilise la commande :
npm uninstall -g @angular/cli
npm cache verify
Puis installer la nouvelle version souhaitée
II.2.2 Création d’un Projet Angular
Pour créer un nouveau projet Angular :
ng new MonProjet
3
AMEVOR Kossi A.
Cette commande génère les différents fichiers nécessaires à une application
basique Angular et installe également les packages requis par le projet.
II.2.3 Exécution d’un Projet Angular
Pour exécuter un projet Angular, on accède au dossier du projet puis on lance :
ng serve
Cette commande compile le code source du projet pour convertir le code
TypeScript en JavaScript en plus elle démarre un serveur Web local basé sur
NodeJS pour déployer localement l’application.
Pour tester le projet généré, il suffit de taper dans un navigateur :
[Link]
II.2.4 Editer un Projet Angular
Pour éditer un projet Angular, on peut installer par exemple l’éditeur de code
extensible «Visual Studio Code » [Link]
Pour éditer un projet Angular avec VS Code, on accède au dossier du projet puis
on lance : code .
4
AMEVOR Kossi A.
II.2.5 Structure d’un projet Angular
Fichiers de Configuration du projet
Dépendances externes du projet
(Librairies JS et CSS)
Logique applicative du projet : Les
composants, les services,…
Le code source du projet
Fichiers de Configuration du projet
5
AMEVOR Kossi A.
II.2.6 Etapes d’exécution d’un projet Angular
Navigateur Web : localhost:4200
[Link]
AppModule ([Link])
AppComponent ([Link])
Type Script
HTML
M Data Binding V
CSS
[Link]
Angular Framework
6
AMEVOR Kossi A.
II.2.7 Structure d’un projet Angular
[Link]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MonProjet</title>
<base href="/">
<meta name="viewport" content="width=device-
width, initial-scale=1">
<link rel="icon" type="image/x-
icon" href="[Link]">
</head>
<body>
<app-root></app-root>
</body>
</html>
[Link]
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from
'@angular/platform-browser-dynamic';
import { AppModule } from './app/[Link]';
import { environment } from './environments/environment';
if ([Link]) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => [Link](err));
7
AMEVOR Kossi A.
[Link]
import { BrowserModule } from
'@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from
'./[Link]';
import { AppComponent } from './[Link]';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
8
AMEVOR Kossi A.
II.3 Data binding avec Angular
II.3.1 Création d’un composant web : binding
ng generate component binding
ou simplement :
ng g c binding
Resultat :
CREATE src/app/binding/[Link] (22 bytes)
CREATE src/app/binding/[Link] (606 bytes)
CREATE src/app/binding/[Link] (279 bytes)
CREATE src/app/binding/[Link] (0 bytes)
UPDATE src/app/[Link] (479 bytes)
9
AMEVOR Kossi A.
❖ Modifier le fichier [Link] :
II.3.2 Interpolation {{}}
❖ Ajouter la variable titre à la classe BindingComponent, le fichier
[Link] :
❖ Modifier le fichier [Link] :
II.3.3 Property Binding []
❖ Ajouter la variable status à la classe BindingComponent, le fichier
[Link] :
10
AMEVOR Kossi A.
❖ Modifier le fichier [Link] :
Selon que le statut change à true ou à false, le bouton est grisé ou non.
II.3.4 Event Binding ( )
❖ Modifier le fichier [Link] :
❖ Ajouter la méthode changer titre à la classe BindingComponent, le fichier
[Link] :
11
AMEVOR Kossi A.
Lorsque nous cliquons sur le bouton « Changer le titre », le titre est changé.
II.3.5 Two Way Binding [( )]
❖ Pour pouvoir utiliser la directive [(ngModel)], importer le module
FormsModule dans le fichier [Link] :
❖ Modifier le fichier [Link] :
❖ Ajouter l’attribut nom à la classe BindingComponent, le fichier
[Link] :
12
AMEVOR Kossi A.
II.4 Intégration de bootstrap dans un projet Angular
Taper la commande :
npm i bootstrap bootstrap-icons
éditer le fichier [Link] :
"styles": [
"src/[Link]",
"node_modules/bootstrap/dist/css/[Link]"
]
"scripts": [
"node_modules/bootstrap/dist/js/[Link]"
]
NB : attention à choisir le bon emplacement pour préciser les chemins des
fichiers bootstrap.
Enfin pour utiliser les icones bootstrap, éditer le fichier [Link] en important
dans ce fichier bootstrap-icons
@import "bootstrap-icons/font/[Link]"
13
AMEVOR Kossi A.
❖ Création d’un menu pour le projet
Editer le fichier [Link] :
<nav class="navbar bg-dark navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-house"></i> Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-
toggle="dropdown" aria-expanded="false">
Catégories
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Liste des Catégories</a></li>
<li><a class="dropdown-item" href="#">Nouvelle catégorie</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-
toggle="dropdown" aria-expanded="false">
Produits
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Liste des produits</a></li>
<li><a class="dropdown-item" href="#">Nouveau produit</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
14
AMEVOR Kossi A.
Voici le résultat :
Pour transformer ce composant en un layout de notre application, il suffit
d’ajouter les balises :
<router-outlet>
</router-outlet>
Activité 1 :
Créer deux composants permettant de créer et d’afficher les différentes
catégories des produits.
❖ Création des composants web de « Catégorie »
ng g c categories
ng g c nouvelle-categorie
Création des routes pour les composants crées
Editer le fichier [Link] et y ajouter les différentes routes :
const routes: Routes = [
{path:"categories", component:CategoriesComponent},
{path:"nouvelle-categorie", component:NouvelleCategorieComponent}
];
Modifier le fichier [Link] en y ajouter l’attribut routerLink :
15
AMEVOR Kossi A.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Catégories
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" routerLink="/categories"
href="#">Liste des Catégories</a></li>
<li><a class="dropdown-item" routerLink="/nouvelle-
categorie" href="#">Nouvelle catégorie</a></li>
</ul>
</li>
En testant les différentes routes créées, on a les résultats suivants :
Voici les résultats du test des différentes routes créées
ss
Dans un premier temps, créons une liste statique de catégories dans notre
composant [Link]
categories : Array<any> = [
{id:1, designation:"Informatique"},
{id:2, designation:"Automibile"},
{id:3, designation:"Electronique"}
];
Voici le composant HTML correspondant :
<div class="p-3">
<div class="card">
<div class="card-body">
<h3>Liste des catégories</h3>
</div>
</div>
</div>
16
AMEVOR Kossi A.
<div class="p-3">
<div class="card">
<div class="card-body">
<table class="table table-hover table-bordered table-striped">
<thead class="table-dark">
<tr>
<th>Id</th>
<th>Désignation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let cat of categories">
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Voici le résultat visuel :
II.6 Simulation d’une API REST avec Json-server
Json-server est un mini serveur fonctionnant avec nodeJS permettant de simuler
un serveur exposant des WebServices, via des URLs. Il permet d’imiter une API
et de fournir un accès dynamique aux données, ce qui signifie qu’on peut lire,
ajouter, mettre à jour et supprimer des données (GET, POST, PUT, PATCH,
DELETE).
[Link]
17
AMEVOR Kossi A.
❖ Mise en place
Installer json-server en tapant la commande :
npm install -g json-server
Créer dans votre projet un dossier nommé data. Dans ce dossier, créer un fichier
nommé [Link] contenant par exemple une liste de catégories.
{
"categories":[
{
"id":1, "designation":"Informatique"
},
{
"id":2, "designation":"Automibile"
},
{
"id":3, "designation":"Electronique"
}
]
}
❖ Démarrer json-server
json-server --watch data/[Link] -p 8888
Pour des raisons d’exécution du script, se référer à la page suivante :
à propos des stratégies d’exécution - PowerShell | Microsoft Learn
Tester votre API à l’adresse : [Link]
❖ Utiliser les données de l’API REST
Dans le fichier [Link], importer le module :
import { HttpClientModule } from '@angular/common/http';
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
18
AMEVOR Kossi A.
Dans le fichier [Link], faire l’injection de dépendance de
httpClient :
constructor(private http:HttpClient) { }
Récupérer la liste des catégories de notre back-end :
categories : Array<any> = [];
ngOnInit(): void {
[Link]<Array<any>>('[Link]
.subscribe({
next : data => {
[Link] = data
},
error: err =>{
[Link](err);
}
})
}
II.7 Mise en place des services pour le projet
Les services s’occupent de la communication avec le back-end.
Pour créer un service, taper la commande :
ng g s nom_dossier/nom_du_service
Exemple : créer un service categorie
ng g s services/categorie
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CategorieService {
constructor(private http:HttpClient) { }
public getAllCategories():Observable<any>{
19
AMEVOR Kossi A.
return [Link]<Array<any>>('[Link]
}
Et le composant catégorie est mis à jour :
constructor(private cs:CategorieService){
}
ngOnInit(): void {
[Link]()
.subscribe({
next : data => {
[Link] = data
},
error: err =>{
[Link](err);
}
})
}
II.8 Création du modèle
export interface Categorie{
id:number,
designation:string
}
Pour créer un modèle, on peut aussi se servir des outils comme json to typeScript :
[Link]
Vous devez faire des changements nécessaires dans le service et le composant.
❖ Méthode pour supprimer une catégorie de la base de données
CategorieService
public deleteCategorie(categorie:Categorie){
return
[Link]<Array<any>>(`[Link]
`);
}
20
AMEVOR Kossi A.
CategoriesComponent
deleteCategorie(cat:Categorie){
if(confirm('Etes-vous sûr de vouloir supprimer?'))
[Link](cat)
.subscribe({
next:value =>{
[Link] = [Link](p=>[Link]!=[Link]);
}
})
}
Composant web
<td>
<button (click)="deleteCategorie(cat)" class="btn btn-outline-danger">
<i class="bi bi-trash"></i>
</button>
</td>
❖ Méthode pour ajouter une catégorie
Formulaire d’ajout d’une catégorie : composant web
<div class="p-3">
<div class="card">
<div class="card-body">
<h3>Formulaire d'ajout d'une catégorie</h3>
<div class="row">
<div class="col-md-6">
<form [formGroup]="categorieForm"
(ngSubmit)="saveCategorie()">
<div>
<label class="form-label">Désignation</label>
<input class="form-control"
formControlName="designation">
</div>
<div class="mt-2">
<button [disabled]="[Link]"
class="btn btn-primary">Enregistrer</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
21
AMEVOR Kossi A.
CategoriesComponent
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CategorieService } from '../services/[Link]';
import { Router } from '@angular/router';
@Component({
selector: 'app-nouvelle-categorie',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class NouvelleCategorieComponent implements OnInit{
categorieForm!:FormGroup;
constructor(private fb:FormBuilder,
private cat : CategorieService,
private router:Router){
ngOnInit(): void {
[Link] = [Link]({
designation : [Link]('', [[Link]])
});
}
saveCategorie(){
let categorie = [Link];
[Link](categorie)
.subscribe({
next: data => {
//alert([Link](data));
[Link]("/categories");
},
error: err=>{
[Link](err);
}
});
}
22
AMEVOR Kossi A.
CategorieService
public saveCategorie(categorie:Categorie):Observable<Categorie>{
return [Link]<Categorie>('[Link]
categorie);
}
Voici les rendus web :
❖ Mise à jour d’une catégorie
− Ajout d’un bouton de modification
<td>
<button (click)="editerCategorie(cat)" class="btn btn-outline-info">
<i class="bi bi-pencil"></i>
</button>
</td>
23
AMEVOR Kossi A.
− Création de la méthode editerCategorie() dans le composant
CategorieComponent.
Pour effectuer la mise à jour, on aura besoin d’un composant :
ng g c editer-categorie
− ajouter une route pour naviguer sur la page éditer-categorie
− {path:"editer-categorie/:id", component:EditerCategorieComponent}
Tester la méthode editerCategorie()
editerCategorie(cat:Categorie){
[Link](`editer-categorie/${[Link]}`);
}
− Récupérer l’id de la catégorie à éditer :
− export class EditerCategorieComponent implements OnInit{
−
− categorieId!:number;
−
− constructor(private activatedRoute:ActivatedRoute){
−
24
AMEVOR Kossi A.
− }
−
− ngOnInit(): void {
− [Link] = [Link]['id'];
− }
−
− }
− Modifier le CategorieService pour récupérer du backend, la catégorie
correspondante à l’id sélectionné :
public getCategoryById(categorieId:number):Observable<Categorie>{
return
[Link]<Categorie>(`[Link]
}
Injecter le service de catégorie dans le composant editerCategorie :
export class EditerCategorieComponent implements OnInit{
categorieId!:number;
categorieForm!:FormGroup;
constructor(private activatedRoute:ActivatedRoute,
private cats:CategorieService,
private fb:FormBuilder){
ngOnInit(): void {
[Link] = [Link]['id'];
[Link]([Link])
.subscribe({
next:categorie =>{
[Link] = [Link]({
id : [Link]([Link]),
designation : [Link]([Link],
[[Link]])
})
},
error:err =>{
[Link](err);
}
});
}
25
AMEVOR Kossi A.
}
Ajouter le formulaire d’édition
<div class="p-3">
<div class="card shadow ms-5 me-5">
<div class="card-header">
<h3>Formulaire de mise à jour d'une catégorie</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6" *ngIf="categorieForm">
<form [formGroup]="categorieForm"
(ngSubmit)="updateCategorie()">
<div>
<label class="form-label">Désignation</label>
<input class="form-control"
formControlName="designation">
</div>
<div class="mt-2">
<button [disabled]="[Link]"
class="btn btn-primary">Valider</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Ecrire la méthode updateCategorie() dans les services
public updateCategorie(categorie:Categorie):Observable<Categorie>{
return
[Link]<Categorie>(`[Link]
categorie);
}
Dans le composant :
26
AMEVOR Kossi A.
updateCategorie(){
let categorie = [Link];
[Link](categorie)
.subscribe({
next : data =>{
//alert([Link](data));
[Link]("/categories");
},
error : err =>{
[Link](err);
}
})
}
27
AMEVOR Kossi A.