Spring Boot

SpringBoot

Tutorial SpringBoot: Integración con Angular

Spring Boot Angular: desarrollo full stack. Domina el desarrollo full stack utilizando Spring Boot y Angular con ejemplos prácticos y detallados.

Aprende SpringBoot y certifícate

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.

CONSTRUYE TU CARRERA EN IA Y PROGRAMACIÓN SOFTWARE

Accede a +1000 lecciones y cursos con certificado. Mejora tu portfolio con certificados de superación para tu CV.

30 % DE DESCUENTO

Plan mensual

19.00 /mes

13.30 € /mes

Precio normal mensual: 19 €
63 % DE DESCUENTO

Plan anual

10.00 /mes

7.00 € /mes

Ahorras 144 € al año
Precio normal anual: 120 €
Aprende SpringBoot online

Ejercicios de esta lección Integración con Angular

Evalúa tus conocimientos de esta lección Integración con Angular con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Controladores Spring MVC

Spring Boot
Código

Uso de Spring con Thymeleaf

Spring Boot
Puzzle

Registro de usuarios

Spring Boot
Test

Crear entidades JPA

Spring Boot
Código

Asociaciones en JPA

Spring Boot
Test

Asociaciones de entidades JPA

Spring Boot
Código

Open API y cómo agregarlo en Spring Boot

Spring Boot
Puzzle

Uso de Controladores REST

Spring Boot
Puzzle

CRUD y JPA Repository

Spring Boot
Puzzle

Servicios en Spring

Spring Boot
Código

Configuración de Vue

Spring Boot
Puzzle

Entidades JPA

Spring Boot
Test

API Query By Example (QBE)

Spring Boot
Puzzle

Controladores MVC

Spring Boot
Test

Anotaciones y mapeo en JPA

Spring Boot
Puzzle

Configuración de Angular

Spring Boot
Puzzle

Controladores Spring REST

Spring Boot
Test

Configuración de Controladores MVC

Spring Boot
Puzzle

Actualizar datos de base de datos

Spring Boot
Test

API Query By Example (QBE)

Spring Boot
Test

Identificadores y relaciones JPA

Spring Boot
Puzzle

Web y Test Starters

Spring Boot
Puzzle

Métodos find en repositorios

Spring Boot
Test

Inserción de datos

Spring Boot
Test

CRUD Customers Spring MVC + Spring Data JPA

Spring Boot
Proyecto

Backend API REST con Spring Boot

Spring Boot
Proyecto

Controladores Spring REST

Spring Boot
Código

API Specification

Spring Boot
Puzzle

Integración con Vue

Spring Boot
Test

Consultas JPQL

Spring Boot
Código

Repositorios reactivos

Spring Boot
Test

Inyección de dependencias

Spring Boot
Test

Introducción a Spring Boot

Spring Boot
Test

Inyección de dependencias

Spring Boot
Código

Vista en Spring MVC con Thymeleaf

Spring Boot
Test

Operadores Reactivos

Spring Boot
Puzzle

Integración con Angular

Spring Boot
Test

API Specification

Spring Boot
Test

Consultas JPQL con @Query en Spring Data JPA

Spring Boot
Test

Repositorios Spring Data

Spring Boot
Test

Inyección de dependencias

Spring Boot
Puzzle

Data JPA y Mail Starters

Spring Boot
Test

Consultas JPQL con @Query en Spring Data JPA

Spring Boot
Puzzle

Verificar token JWT en peticiones

Spring Boot
Test

Login de usuarios

Spring Boot
Test

Integración con React

Spring Boot
Test

Configuración de React

Spring Boot
Puzzle

Borrar datos de base de datos

Spring Boot
Test

Todas las lecciones de SpringBoot

Accede a todas las lecciones de SpringBoot y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Spring Boot

Spring Boot

Introducción Y Entorno

Spring Boot Starters

Spring Boot

Introducción Y Entorno

Inyección De Dependencias

Spring Boot

Introducción Y Entorno

Controladores Spring Mvc

Spring Boot

Spring Web

Vista En Spring Mvc Con Thymeleaf

Spring Boot

Spring Web

Controladores Spring Rest

Spring Boot

Spring Web

Open Api Y Cómo Agregarlo En Spring Boot

Spring Boot

Spring Web

Servicios En Spring

Spring Boot

Spring Web

Clientes Resttemplate Y Restclient

Spring Boot

Spring Web

Rxjava En Spring Web

Spring Boot

Spring Web

Crear Entidades Jpa

Spring Boot

Persistencia Spring Data

Asociaciones De Entidades Jpa

Spring Boot

Persistencia Spring Data

Repositorios Spring Data

Spring Boot

Persistencia Spring Data

Métodos Find En Repositorios

Spring Boot

Persistencia Spring Data

Inserción De Datos

Spring Boot

Persistencia Spring Data

Actualizar Datos De Base De Datos

Spring Boot

Persistencia Spring Data

Borrar Datos De Base De Datos

Spring Boot

Persistencia Spring Data

Consultas Jpql Con @Query En Spring Data Jpa

Spring Boot

Persistencia Spring Data

Api Query By Example (Qbe)

Spring Boot

Persistencia Spring Data

Api Specification

Spring Boot

Persistencia Spring Data

Repositorios Reactivos

Spring Boot

Persistencia Spring Data

Introducción E Instalación De Apache Kafka

Spring Boot

Mensajería Asíncrona

Crear Proyecto Con Apache Kafka

Spring Boot

Mensajería Asíncrona

Creación De Producers

Spring Boot

Mensajería Asíncrona

Creación De Consumers

Spring Boot

Mensajería Asíncrona

Kafka Streams En Spring Boot

Spring Boot

Mensajería Asíncrona

Introducción A Spring Webflux

Spring Boot

Reactividad Webflux

Spring Data R2dbc

Spring Boot

Reactividad Webflux

Controlador Rest Reactivo Basado En Anotaciones

Spring Boot

Reactividad Webflux

Controlador Rest Reactivo Funcional

Spring Boot

Reactividad Webflux

Operadores Reactivos Básicos

Spring Boot

Reactividad Webflux

Operadores Reactivos Avanzados

Spring Boot

Reactividad Webflux

Cliente Reactivo Webclient

Spring Boot

Reactividad Webflux

Introducción A Spring Security

Spring Boot

Seguridad Con Spring Security

Seguridad Basada En Formulario En Mvc Con Thymeleaf

Spring Boot

Seguridad Con Spring Security

Registro De Usuarios

Spring Boot

Seguridad Con Spring Security

Login De Usuarios

Spring Boot

Seguridad Con Spring Security

Verificar Token Jwt En Peticiones

Spring Boot

Seguridad Con Spring Security

Seguridad Jwt En Api Rest Spring Web

Spring Boot

Seguridad Con Spring Security

Seguridad Jwt En Api Rest Reactiva Spring Webflux

Spring Boot

Seguridad Con Spring Security

Autenticación Y Autorización Con Anotaciones

Spring Boot

Seguridad Con Spring Security

Testing Unitario De Componentes Y Servicios

Spring Boot

Testing Con Spring Test

Testing De Repositorios Spring Data Jpa

Spring Boot

Testing Con Spring Test

Testing Controladores Spring Mvc Con Thymeleaf

Spring Boot

Testing Con Spring Test

Testing Controladores Rest Con Json

Spring Boot

Testing Con Spring Test

Testing De Aplicaciones Reactivas Webflux

Spring Boot

Testing Con Spring Test

Testing De Seguridad Spring Security

Spring Boot

Testing Con Spring Test

Testing Con Apache Kafka

Spring Boot

Testing Con Spring Test

Integración Con Angular

Spring Boot

Integración Frontend

Integración Con React

Spring Boot

Integración Frontend

Integración Con Vue

Spring Boot

Integración Frontend

Accede GRATIS a SpringBoot y certifícate

Certificados de superación de SpringBoot

Supera todos los ejercicios de programación del curso de SpringBoot y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.

En esta lección

Objetivos de aprendizaje de esta lección

  1. Entender la arquitectura básica de una aplicación que combina Angular con Spring Boot.
  2. Aprender a configurar proyectos en ambos frameworks para una integración exitosa.
  3. Establecer una comunicación efectiva entre el frontend y el backend a través de APIs RESTful.
  4. Implementar estrategias de autenticación y autorización en la aplicación.
  5. Manejar y solucionar problemas relacionados con CORS (Cross-Origin Resource Sharing).