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ícateEn 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.
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
Uso de Spring con Thymeleaf
Registro de usuarios
Crear entidades JPA
Asociaciones en JPA
Asociaciones de entidades JPA
Open API y cómo agregarlo en Spring Boot
Uso de Controladores REST
CRUD y JPA Repository
Servicios en Spring
Configuración de Vue
Entidades JPA
API Query By Example (QBE)
Controladores MVC
Anotaciones y mapeo en JPA
Configuración de Angular
Controladores Spring REST
Configuración de Controladores MVC
Actualizar datos de base de datos
API Query By Example (QBE)
Identificadores y relaciones JPA
Web y Test Starters
Métodos find en repositorios
Inserción de datos
CRUD Customers Spring MVC + Spring Data JPA
Backend API REST con Spring Boot
Controladores Spring REST
API Specification
Integración con Vue
Consultas JPQL
Repositorios reactivos
Inyección de dependencias
Introducción a Spring Boot
Inyección de dependencias
Vista en Spring MVC con Thymeleaf
Operadores Reactivos
Integración con Angular
API Specification
Consultas JPQL con @Query en Spring Data JPA
Repositorios Spring Data
Inyección de dependencias
Data JPA y Mail Starters
Consultas JPQL con @Query en Spring Data JPA
Verificar token JWT en peticiones
Login de usuarios
Integración con React
Configuración de React
Borrar datos de base de datos
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
Introducción Y Entorno
Spring Boot Starters
Introducción Y Entorno
Inyección De Dependencias
Introducción Y Entorno
Controladores Spring Mvc
Spring Web
Vista En Spring Mvc Con Thymeleaf
Spring Web
Controladores Spring Rest
Spring Web
Open Api Y Cómo Agregarlo En Spring Boot
Spring Web
Servicios En Spring
Spring Web
Clientes Resttemplate Y Restclient
Spring Web
Rxjava En Spring Web
Spring Web
Crear Entidades Jpa
Persistencia Spring Data
Asociaciones De Entidades Jpa
Persistencia Spring Data
Repositorios Spring Data
Persistencia Spring Data
Métodos Find En Repositorios
Persistencia Spring Data
Inserción De Datos
Persistencia Spring Data
Actualizar Datos De Base De Datos
Persistencia Spring Data
Borrar Datos De Base De Datos
Persistencia Spring Data
Consultas Jpql Con @Query En Spring Data Jpa
Persistencia Spring Data
Api Query By Example (Qbe)
Persistencia Spring Data
Api Specification
Persistencia Spring Data
Repositorios Reactivos
Persistencia Spring Data
Introducción E Instalación De Apache Kafka
Mensajería Asíncrona
Crear Proyecto Con Apache Kafka
Mensajería Asíncrona
Creación De Producers
Mensajería Asíncrona
Creación De Consumers
Mensajería Asíncrona
Kafka Streams En Spring Boot
Mensajería Asíncrona
Introducción A Spring Webflux
Reactividad Webflux
Spring Data R2dbc
Reactividad Webflux
Controlador Rest Reactivo Basado En Anotaciones
Reactividad Webflux
Controlador Rest Reactivo Funcional
Reactividad Webflux
Operadores Reactivos Básicos
Reactividad Webflux
Operadores Reactivos Avanzados
Reactividad Webflux
Cliente Reactivo Webclient
Reactividad Webflux
Introducción A Spring Security
Seguridad Con Spring Security
Seguridad Basada En Formulario En Mvc Con Thymeleaf
Seguridad Con Spring Security
Registro De Usuarios
Seguridad Con Spring Security
Login De Usuarios
Seguridad Con Spring Security
Verificar Token Jwt En Peticiones
Seguridad Con Spring Security
Seguridad Jwt En Api Rest Spring Web
Seguridad Con Spring Security
Seguridad Jwt En Api Rest Reactiva Spring Webflux
Seguridad Con Spring Security
Autenticación Y Autorización Con Anotaciones
Seguridad Con Spring Security
Testing Unitario De Componentes Y Servicios
Testing Con Spring Test
Testing De Repositorios Spring Data Jpa
Testing Con Spring Test
Testing Controladores Spring Mvc Con Thymeleaf
Testing Con Spring Test
Testing Controladores Rest Con Json
Testing Con Spring Test
Testing De Aplicaciones Reactivas Webflux
Testing Con Spring Test
Testing De Seguridad Spring Security
Testing Con Spring Test
Testing Con Apache Kafka
Testing Con Spring Test
Integración Con Angular
Integración Frontend
Integración Con React
Integración Frontend
Integración Con Vue
Integración Frontend
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
- Entender la arquitectura básica de una aplicación que combina Angular con Spring Boot.
- Aprender a configurar proyectos en ambos frameworks para una integración exitosa.
- Establecer una comunicación efectiva entre el frontend y el backend a través de APIs RESTful.
- Implementar estrategias de autenticación y autorización en la aplicación.
- Manejar y solucionar problemas relacionados con CORS (Cross-Origin Resource Sharing).