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 [Link]
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 [Link]
<app-header></app-header>
<app-footer></app-footer>
<router-outlet></router-outlet>
• Installer bootstrap
Tapez : npm install bootstrap
Vérifez dans “[Link]”
Allez dans “[Link]” et ajouter
"styles": [
"node_modules/bootstrap/dist/css/[Link]"
],
Ou Dans “[Link]” mettez
@import "~bootstrap/dist/css/[Link]"
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 “[Link]”
CHOUCHANE M.H 2
Allez dans “[Link]”
Si vous tapez la root “pages” vous obtenez
Dans le cmd tapez:
Puis : ng g c /pages/gestion-department
Ouvrez : [Link]
CHOUCHANE M.H 3
Puis allez dans: “[Link]”
Dans [Link]
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 “[Link]” puis le “[Link]” comme
suit
CHOUCHANE M.H 4
Vérifier les routes
Enlevez le footer de “[Link]”
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
“[Link]”
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 “[Link]” 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 “[Link]” chargez le sélecteur
<app-list></app-list>
Ouvrez “[Link]” 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 “[Link]” (sous gestion-employee)
Injecter le service employeeService dans le fichier “\[Link]” 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 “[Link]”
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 “[Link]” pour afficher la liste des employées
Résultat :
CHOUCHANE M.H 10
