Introducción

Angular se utiliza cada vez más para la parte front de aplicaciones, algunas veces con ayuda de componentes ReactJS o VueJS, en lugar de o en sustitución de las páginas JSP o JSF. Las tecnologías de representación visual de servidores basadas en plantillas como JSF o JSP prácticamente ya no se utilizan para crear nuevas aplicaciones.

Empezar con Angular es complejo. Para entender cómo funciona, lo ideal para este capítulo es probar los ejemplos al mismo tiempo que se lee la teoría. Si desea dominar este framework, puede consultar el libro Angular - Desarrolle sus aplicaciones web con el framework JavaScript de Google, de Daniel DJORDJEVIC, Sébastien OLLIVIER y William KLEIN, publicado por Ediciones ENI.

Este capítulo se ilustra con dos pequeños proyectos. Un proyecto Front en Angular y uno back en Spring Boot.

La parte front es estática a nivel de archivos y, por lo tanto, se puede desplegar directamente en los front-ends Web (Apache, Nginx, etc.).

El ejemplo es deliberadamente sencillo para ilustrar los aspectos principales. Para una aplicación completa, puede crear y estudiar fácilmente ejemplos con jHipster.

El ejemplo utiliza Java 8, NodeJS y Angular CLI.

La parte backend

La parte backend es una aplicación sencilla que expone una API REST.

1. Generación de un backend

Vamos a crear un backend clásico con Spring Initializr (https://start.spring.io/):

Metadatos del proyecto:

Parámetro	Utilidad
type	maven/java/Spring Boot 2.5.12
group	fr.eni.spring5.angular
artefact	fr-eni-spring5-backend
Description	Proyecto ejemplo Angular

Los módulos Spring del proyecto:

Módulo	Utilidad
DevTools	Facilitar la recarga del servidor en caso de recompilación
Lombok	Para simplificar el código
H2	Para la base de datos
JPA	Para la capa de persistencia
Rest Repositories	Para exponer los servicios REST
Web	Tener una aplicación web
Rest Repositories HAL Browser	Para ver datos en un explorador

Una vez que se genera el proyecto, es posible arrancar el servidor inicial con el comando mvn spring-boot:run.

La página del navegador HAL se muestra en http://localhost:8080/ browser/index.html#/.

Vamos a crear los paquetes en fr.eni.spring5.angular.backend:

Paquete	Utilidad
domain	Objetos de dominio JPA
repositories	DAO para acceder a objetos de dominio
controllers	Controladores Spring MVC
config	Las clases de configuración Spring
util	Clases de utilidades

Vamos a crear una primera clase de dominio:

Cuenta.java

@Data 
@NoArgsConstructor 
@EqualsAndHashCode(exclude={"id"}) 
@Entity 
public class Cuenta { 
  @Id 
  @GeneratedValue 
  private Long id; 
  private Integer...

La parte frontend

La parte frontend es relativamente genérica e independiente de la parte backend.

Para el frontend, utilizamos las herramientas Angular CLI que simplifican nuestro desarrollo, usando la línea de comandos.

Asumiremos que las siguientes herramientas ya están instaladas:

Herramientas	Sitio de referencia para la instalación
Node.js	https://nodejs.org/en/
yarn	https://yarnpkg.com/en/

1. Angular CLI

Angular CLI es una suite de herramientas en línea de comandos, que ayuda a crear y modificar aplicaciones Angular.

A continuación, se muestra una tabla que enumera los comandos:

Comando	Utilidad
ng new	Crear una nueva aplicación.
ng serve	Iniciar el servidor.
ng generate	Generar un componente, directiva, ruta, pipe o servicio.
ng lint	Lint el código de la aplicación con tslint.
ng test	Ejecutar las pruebas unitarias.
ng e2e	Ejecutar las pruebas end to end.
ng build	Construir la aplicación.

2. Creación del proyecto inicial

Instalar Angular CLI:

npm install -g @angular/cli

Crear el proyecto Angular:

ng new miApli --directory.

La descarga de los archivos se inicia en el directorio actual.

3. Inicio de la aplicación

ng serve

La aplicación se inicia y es visible en http://localhost:4200/

Es posible terminar la ejecución con la combinación de teclas [Ctrl] C.

Cree un componente CuentaListComponent y otro CuentaService con el siguiente comando:

ng generate component cuenta-list 
  create src/app/cuenta-list/cuenta-list.component.css (0 bytes) 
  create src/app/cuenta-list/cuenta-list.component.html...

Puntos clave

Angular es simple y accesible para desarrolladores de Java.
El enlace Spring y Angular se realiza a través de la API REST.
Las aplicaciones SPA (Angular, ReactJS, etc.) han reemplazado masivamente a las aplicaciones JSP y JSF, y Java y Spring se centrarán en el backend.

Aplicación Spring Angular