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 à la place ou en remplacement 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" de Daniel DJORDJEVIC - Sébastien OLLIVIER - 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 8, NodeJS, Angular CLI.
La partie backend
La partie backend est une application simple exposant une API REST.
1. Génération d’un backend
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 |
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 commande mvn spring-boot:run.
La page du navigateur HAL s’affiche http://localhost:8080/ browser/index.html#/.
Créons les packages dans fr.eni.spring5.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 |
Créons une première classe de domaine :
Compte.java
@Data
@NoArgsConstructor
@EqualsAndHashCode(exclude={"id"})
@Entity
public class Compte {
@Id
@GeneratedValue...
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 utilisant 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 |
|
yarn |
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 des commandes :
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 votre application en utilisant tslint. |
ng test |
Lancer les tests unitaires. |
ng e2e |
Lancer les tests de bout en bout. |
ng build |
Construire l’application. |
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
ng serve
L’application se lance et elle est visible sur http://localhost:4200/.
Il est possible de terminer l’exécution en réalisant la combinaison de touche [Ctrl] C.
Créer un composant CompteListComponent et CompteService avec la commande suivante :
ng generate component...
Points clés
-
Angular est simple et 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.