Tutorial SpringBoot: Integración con Angular

En la era moderna del desarrollo web, las aplicaciones de una sola página (SPA) han ganado una inmensa popularidad debido a su capacidad para ofrecer experiencias de usuario rápidas y fluidas.

Angular, desarrollado y mantenido por Google, es uno de los principales frameworks para construir Frontend SPAs. Por su parte, Spring Boot, que es parte del ecosistema de Spring, proporciona una forma simplificada de construir aplicaciones web y microservicios en el lenguaje de programación Java, ideal para construir un Backend.

La combinación de Angular en el frontend y Spring Boot en el backend ofrece una arquitectura de desarrollo full-stack. Mientras que Angular se encarga de la interactividad y presentación de datos al usuario, Spring Boot facilita la gestión de la lógica de negocio, el acceso a datos y la comunicación con otras aplicaciones o servicios. Esta integración combina la potencia y flexibilidad de ambos mundos: la eficiencia y robustez del ecosistema de Java junto con la reactividad y versatilidad del framework Angular.

Al combinar Angular y Spring Boot en un proyecto, se está construyendo una solución full-stack, donde Angular sirve como el frontend y Spring Boot actúa como el backend. Establecer la estructura correcta y garantizar una configuración adecuada es crucial para el éxito del proyecto. A continuación se detallan los pasos y consideraciones importantes en la configuración de ambos lados.

Spring Boot

Crear un proyecto desde start.spring.io.

En el archivo pom.xml, se deben agregar las dependencias requeridas. Por ejemplo, para una aplicación web con JPA y base de datos H2:

<dependencies>
    <!-- Dependencia para crear una aplicación web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Dependencia para JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <!-- Base de datos H2 -->
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

Angular

1. Pre-requisitos

Es necesario tener instalado Node.js y npm (gestor de paquetes de Node) en el sistema. Estas herramientas son esenciales para gestionar las bibliotecas y herramientas que Angular necesita.

2. Instalación del Angular CLI

El Angular CLI es una herramienta de línea de comandos que facilita la creación y gestión de proyectos Angular. Se instala globalmente usando npm:

npm install -g @angular/cli

3. Creación del proyecto

Una vez que se tiene el Angular CLI, crear un nuevo proyecto Angular es sencillo:

ng new nombre-del-proyecto

Esta acción genera una estructura de directorios estándar para el proyecto Angular, completa con una configuración inicial y un simple componente de aplicación.

4. Servir la aplicación

Para visualizar y probar la aplicación Angular durante el desarrollo, se utiliza el comando:

cd nombre-del-proyecto
ng serve

Con esto, Angular compila y sirve la aplicación en http://localhost:4200/ por defecto.

Comunicación entre Servidor y Cliente

En una arquitectura basada en cliente-servidor, como la proporcionada por la combinación de Angular y Spring Boot, la comunicación efectiva entre el frontend (cliente) y el backend (servidor) es esencial para garantizar el flujo adecuado de datos y el funcionamiento correcto de la aplicación.

Spring Boot (Servidor)

1. Exposición de APIs REST

Spring Boot, a través de Spring MVC, facilita la creación y exposición de APIs RESTful.

Estas APIs actúan como puntos de acceso para que el cliente interactúe con el servidor.

@RestController
@RequestMapping("/api/products")
public class ProductController {

    @Autowired
    private ProductService productService;

    @GetMapping
    public List<Product> getAllProducts() {
        return productService.findAll();
    }

    @GetMapping("/{id}")
    public Product getProductById(@PathVariable Long id) {
        return productService.findById(id);
    }
}

En el ejemplo anterior, se ha expuesto una API que permite obtener todos los productos o un producto específico por su ID.

Será necesario crear también una entidad Product, un servicio ProductService y un repositorio ProductRepository, de forma similar a la explicada en anteriores lecciones de Spring Boot.

2. Serialización y Deserialización

Spring Boot, gracias a bibliotecas como Jackson, se encarga automáticamente de convertir objetos en JSON al enviar respuestas y de convertir el JSON entrante en objetos al recibir peticiones.

3. CORS (Cross-Origin Resource Sharing):

Para que un cliente (como una aplicación Angular) alojado en un dominio o puerto diferente pueda consumir la API de Spring Boot, es esencial gestionar las políticas CORS.

El concepto de Cross-Origin Resource Sharing (CORS) es una política de seguridad implementada en navegadores web para controlar las solicitudes realizadas a dominios diferentes al que se originó la página web. Cuando se desarrollan aplicaciones modernas, especialmente en arquitecturas de cliente-servidor donde el frontend y el backend pueden residir en diferentes dominios o puertos, el manejo adecuado de CORS es crucial.

Los navegadores restringen las solicitudes HTTP realizadas por JavaScript usando el objeto XMLHttpRequest para un dominio diferente al que sirvió la página web. Esta restricción es una medida de seguridad para evitar ataques maliciosos, como los ataques CSRF (Cross-Site Request Forgery). Sin embargo, en la era moderna de las aplicaciones web, es común que un frontend se comunique con un backend que reside en un dominio diferente. Aquí es donde entra en juego CORS, permitiendo al servidor informar al navegador que es seguro para el código de ciertos orígenes acceder a los recursos.

Spring facilita esto con anotaciones y configuración:

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://localhost:4200")
            .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

Consideraciones adicionales:

• allowedOrigins: Define los orígenes que están permitidos. Se puede especificar múltiples orígenes o usar * para permitir todos.

• allowedMethods: Define los métodos HTTP permitidos.

• allowedHeaders: Indica qué encabezados HTTP se pueden usar durante la solicitud real.

• exposedHeaders: Indica los encabezados que se pueden exponer como parte de la respuesta.

• allowCredentials: Si se debe permitir o no que las cookies se incluyan en las solicitudes.

• maxAge: Indica cuánto tiempo (en segundos) puede ser cacheada la respuesta de la verificación de CORS.

Manejar adecuadamente CORS es crucial para garantizar que las aplicaciones modernas basadas en cliente-servidor funcionen correctamente y de manera segura. La combinación de Spring Boot y Angular, con sus herramientas y configuraciones, permite a los desarrolladores gestionar CORS de manera efectiva, garantizando que las solicitudes entre el frontend y el backend se realicen sin problemas.

Angular (Cliente)

1. HttpClient

Angular proporciona el módulo HttpClient para realizar solicitudes HTTP. Estas solicitudes se utilizan para interactuar con las APIs RESTful expuestas por el servidor.

Primero, se debe importar el módulo HttpClientModule en el módulo de la aplicación:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule],
  ...
})
export class AppModule { }

Luego, se puede utilizar HttpClient en un servicio:

import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private apiUrl = 'http://localhost:8080/api/products';

  constructor(private http: HttpClient) {}

  getAllProducts() {
    return this.http.get<Product[]>(this.apiUrl);
  }

  getProductById(id: number) {
    return this.http.get<Product>(`${this.apiUrl}/${id}`);
  }
}

Será necesario crear la clase Product.

2. Manejo de Respuestas y Errores

Con el módulo HttpClient, las respuestas se entregan como observables. Estos observables pueden ser gestionados utilizando operadores de RxJS para transformar, filtrar o manejar errores.

getAllProducts() {
    return this.http.get<Product[]>(this.apiUrl).pipe(
      catchError(this.handleError)
    );
}

private handleError(error: HttpErrorResponse) {
    // Log y manejo del error.
    console.error('Error:', error);
    return throwError('Hubo un problema al obtener los datos.');
}

La comunicación efectiva entre cliente y servidor es esencial para garantizar que los datos se transfieran correctamente y que la lógica de la aplicación se ejecute como se espera. La combinación de Spring Boot y Angular ofrece herramientas poderosas para simplificar y optimizar esta comunicación, permitiendo a los desarrolladores centrarse en la lógica de negocio y en ofrecer una experiencia de usuario excepcional.