Partie Angular (Gestion des employés et Départements)

Partie I : Création des modules, composants et routes

• Créer dossier “pages” sous “App”

Tapez la commande : ng g module pages –routing
Ensuite : ng g c pages
Ng serve
• Nettoyer le app.component.html
Laissez

<router-outlet></router-outlet>

• Générer un nouveau composant nomme “header”

Générer un nouveau composant nomme “footer”
• Appelez les 2 sélecteurs des composants dans app.component.html
<app-header></app-header>
<app-footer></app-footer>
<router-outlet></router-outlet>
• Installer bootstrap
Tapez : npm install bootstrap

Vérifez dans “package.json”

Allez dans “angular.json” et ajouter

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Ou Dans “styles.css” mettez

@import "~bootstrap/dist/css/bootstrap.min.css"

Faites de même pour le Jquery (script)

• Copier un style bootstrap de navbar à partir du site officiel de bootstrap

Mettez le dans le fichier Html de “header”

<nav class="navbar navbar-light bg-light">

<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">

CHOUCHANE M.H 1
 <input class="form-control me-2" type="search" placeholder="Search"
aria-label="Search">

<button class="btn btn-outline-success" type="submit">Search</button>

</form>
</div>
</nav>

Ça donne

Supprimez le form search et remplacez par

Ajouter également

Le bouton gestion des départements

Ajouter les 2 routes suivantes

• Allez dans “pages-routing.modules.ts”

CHOUCHANE M.H 2
 Allez dans “app-routing.module.ts”

Si vous tapez la root “pages” vous obtenez

Dans le cmd tapez:

Puis : ng g c /pages/gestion-department

Ouvrez : gestion-department-routing.module.ts

CHOUCHANE M.H 3
Puis allez dans: “pages-routing.modules.ts”

Dans pages.component.html

Effacer le contenu et mettez

<router-outlet></router-outlet>
Corrigez

Elmevez le “e”

Cliquez sur “gestion des départements”

Refaire le même travail avec “gestion-employee” c’est à dire créer le module puis le composant
“gestion-employee” et configurez les routing

Configurez d’abord “gestion-employee-routing.module.ts” puis le “pages-routing.mudule.ts” comme

suit

CHOUCHANE M.H 4
Vérifier les routes

Enlevez le footer de “app.component.html”

Remplacez le style du header (html)

<nav class="navbar navbar-light bg-light">

Par

<nav class="navbar bg-info">

Partie II : Création des services

Tapez dans le cmd: ng g s services/department

Ouvrez le fichier

“department.service.ts”

Appelez les services du Spring Boot comme suit

CHOUCHANE M.H 5
Attention vous utiliser un caractère spécial " ` " il faut appuyer alt-gr +7
Changer le fichier “environnement.ts” comme suit

Tapez ensuite dans le cmd (création du composant “list” sous “gestion-department

ng g c pages/gestion-department/list

puis allez dans “gestion-department.component.html” chargez le sélecteur

<app-list></app-list>

Ouvrez “list.component.ts” y mettez

CHOUCHANE M.H 6
Créez les services du module employee

ng g s services/employee

Attention vous utiliser un caractère spécial " ` " il faut appuyer alt-gr +7
Créez le composant “list”

Tapez: ng g c pages/gestion-employee/list

CHOUCHANE M.H 7
Implémentez le fichier “list.component.ts” (sous gestion-employee)

Injecter le service employeeService dans le fichier “\gestion-employee.module.ts” faites de même

avec “departmentService”

CHOUCHANE M.H 8
Vous obtenez

Il y a encore une erreur au niveau du serveur Spring Boot

Aller dans “EmployeeRestController.java”

Et ajouter @CrossOrigin(value="*")

avec import nécessaire

Il faut exécuter le projet Spring Boot et s’assurer que le serveur est en marche

Vous obtenez

CHOUCHANE M.H 9
Modifier le fichier “list.component.html” pour afficher la liste des employées

Résultat :

CHOUCHANE M.H 10