Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Java Spring
  3. Application Spring Angular
Extrait - Java Spring Le socle technique des applications Jakarta EE (5e édition)
Extraits du livre
Java Spring Le socle technique des applications Jakarta EE (5e édition) Revenir à la page d'achat du livre

Application Spring Angular

Introduction

On utilise de plus en plus Angular avec parfois l’aide des composants ReactJS et/ou VueJS pour la partie front des applications plutôt que des pages JSP ou JSF. Les technologies de rendu serveur basées sur des templates comme JSF ou JSP ne sont pratiquement plus utilisées pour créer de nouvelles applications.

Débuter sur Angular est complexe. L’idéal pour ce chapitre est d’essayer les exemples en même temps que la lecture pour comprendre le fonctionnement. Si vous souhaitez maîtriser ce framework, vous pouvez consulter l’ouvrage Angular - Développez vos applications web avec le framework JavaScript de Google (3e édition) de Daniel Djordjevic, Sébastien Ollivier et William Klein aux Éditions ENI.

Ce chapitre est illustré par deux petits projets. Un projet Front en Angular et un projet back en Spring Boot.

La partie front est statique au niveau des fichiers et peut donc être déployée directement sur les frontaux web (Apache, Nginx...).

L’exemple est volontairement simple pour illustrer les principes. Pour une application complète, on peut facilement se créer et étudier des exemples avec jHipster.

L’exemple utilise Java 17, NodeJS et Angular CLI.

Construire une application Angular avec un backend Spring Boot implique généralement les étapes suivantes :

1. Créer...

La partie backend

La partie backend est une application simple exposant une API REST.

Nous créons un backend classique avec Spring Initializr : https://start.spring.io/.

Les métadonnées du projet :

Paramètre

Utilité

type

maven/java/Spring Boot 2.5.12

group

fr.eni.spring5.angular

artefact

fr-eni-spring5-backend

description

Projet exemple Angular

Les modules Spring du projet :

Module

Utilité

DevTools

Pour faciliter le rechargement du serveur en cas de recompilation.

Lombok

Pour simplifier le code.

H2

Pour la base de données.

JPA

Pour la couche de persistance.

Rest Repositories

Pour exposer les services REST.

Web

Pour avoir une application web.

Rest Repositories HAL Browser

Pour voir les données dans un navigateur.

Une fois le projet généré, il est possible de démarrer le serveur initial via la commandemvn spring-boot:run.

La page du navigateur HAL s’affiche http://localhost:8080/browser/index.html#/.

Créons les packages dans fr.eni.spring6.angular.backend :

Package

Utilité

domain

Les objets du domaine JPA.

repositories

Les DAO pour accéder aux objets du domaine.

controllers

Les contrôleurs Spring MVC.

config

Les classes de configuration Spring.

util

Les classes utilitaires.

1. Classes de domaine

Créons une première classe de domaine :

Compte.java

@Data 
@NoArgsConstructor 
@EqualsAndHashCode(exclude={"id"}) 
@Entity 
public class Compte...

La partie frontend

La partie frontend est relativement générique et indépendante de la partie backend.

Pour le frontend, nous utilisons les outils Angular CLI qui nous simplifient le développement en nous permettant d’utiliser la ligne de commande.

Nous allons supposer que les outils suivants sont déjà installés :

Outils

Site de référence pour l’installation

Node.js

https://nodejs.org/en/

Yarn

https://yarnpkg.com/en/

1. Angular CLI

Angular CLI est une suite d’outils en lignes de commandes qui aide à la création et à la modification d’applications Angular.

Voici un tableau qui liste les commandes les plus utiles :

Commande

Utilité

ng new

Créer une nouvelle application.

ng serve

Démarrer le serveur.

ng generate

Générer un composant, une directive, une route, un pipe ou un service.

ng lint

Lint le code de l’application en utilisant tslint.

ng test

Lancer les tests unitaires.

ng e2e

Lancer les tests de bout en bout.

ng build

Construire l’application.

Le terme « Lint » fait référence à un processus de vérification du code source pour détecter des erreurs, des problèmes de style ou des bugs potentiels. Lint est un outil qui analyse le code pour améliorer la qualité et la cohérence.

2. Création du projet initial

Installer Angular CLI :

npm install -g @angular/cli 

Créer le projet Angular :

ng new monAppli --directory . 

Le téléchargement de fichiers se lance dans le répertoire courant.

3. Démarrage de l’application

Démarrer l’application...

Facilitations

L’approche API First permet de générer des parties du code via des générateurs comme OpenAPI Generator.

Nous pouvons générer la partie serveur du backend mais aussi la partie frontend de la partie Angular. Cela permet de gagner énormément de temps.

De même, des générateurs comme jHipster génèrent une application complète à partir d’une représentation de son modèle de données (via un DSL au format JDL). Nous pouvons nous en servir pour générer et récupérer du code à personnaliser pour une très grande partie de notre application.

Il faut rester au plus près des standards et de l’état de l’art pour la partie frontend, car les frameworks évoluent tous les six mois et nous rencontrerions des difficultés à maintenir une base de code, ou un framework maison.

C’est aussi valable pour le backend mais les technologies évoluent à un rythme moins soutenu côté backend.

Points clés

Points à retenir :

  • Angular, bien que complexe, reste accessible pour des développeurs Java.

  • La liaison Spring et Angular se fait via l’API REST.

  • Les applications SPA (Angular, ReactJS...) ont massivement remplacé les applications JSP et JSF, et Java et Spring se concentreront sur le backend.