TP 4 : Créer une application Single Page Application à l’aide de l’Angular et Spring boot

Objectifs du TP

Fullstack App Angular Component+Services Dependency Injection JWT

Outils et dépendances de ce TP

Dans ce TP vous auriez besoin d’avoir :

• De votre VS code pour développer la partie front-end pour le projet Angular. Nous allons évoluer et travailler avec la version 18.
• De l’éditeur IntelliJ version community sinon vous aurez un IDE avec une période d’essai pour développer la partie Back-end avec Spring.

Description de l’application à développer

Dans notre TP, nous allons créer une application Fullstack contenant deux parties principales: la partie back-end et la partie front-end. Cette application web sera un SPA, Single Page Application. Cela veut dire que nous n’aurons qu’une seule page HTML qui sera dynamiquement mise à jour au fur et à mesure des interactions utilisateur, sans rechargement complet de la page. Les différentes sections de l’application seront gérées via JavaScript, généralement avec des frameworks comme Angular, React, ou Vue.js, ce qui permet une expérience utilisateur plus fluide et réactive. Cette application est une application pour la gestion de projet, où vous aurez une interface pour l’authentification puis vous aurez la main pour ajouter un projet et ses tâches respectives.

Première partie : le backend avec le framework Spring

Nous allons initialiser le projet Spring en se rendant au site :

https://start.spring.io/

Vous aurez un formulaire pour initialiser votre projet. Choisissez pour:

• Project: maven
• Language : Java
• Spring Boot : 3.3.4
• Group : enit.tp4
• Artifact : TaskManager
• Name : TaskManager
• Description : TP4 ENIT : Application TaskManager
• Package name: enit.tp4.TaskManager
• Packaging : Jar
• Java: 21

A gauche, vous avez Add dependencies. Appuyiez dessus et vous obtiendrez une liste de packages que vous aller installer dans votre application:

• Spring Web
• h2
• Mysql Driver (Si vous utilisez Postgresql, vous pouvez ajouter Postgresql driver)
• Spring Data JPA
• Lombok

En appuyant sur GENERATE vous aller pouvoir télécharger le package sur votre ordinateur. Décompressez le fichier .zip ainsi téléchargé et vous l’ouvrez avec votre IDE.

En ouvrant l’IDE,