CRUD usando MySQL, Express.js y Angular Parte 2

En la primera parte de este tutorial, aprendimos cómo configurar una base de datos MySQL y crear una API RESTful usando Express.js. Ahora, en esta segunda parte, nos centraremos en la integración de Angular para crear la interfaz de usuario y realizar operaciones CRUD en nuestra base de datos.

Configuración de Angular

Lo primero que debemos hacer es configurar nuestro entorno de desarrollo para trabajar con Angular. Si no tienes instalado Node.js en tu sistema, puedes descargarlo desde su sitio web oficial. Una vez que tengas Node.js instalado, puedes instalar Angular CLI utilizando el siguiente comando en tu terminal:


npm install -g @angular/cli


Una vez instalado Angular CLI, puedes crear un nuevo proyecto de Angular utilizando el siguiente comando:


ng new my-angular-app


Esto creará una nueva carpeta llamada ‘my-angular-app’ con la estructura de un proyecto de Angular preconfigurado.

Creación de componentes en Angular

Para nuestro CRUD, crearemos cuatro componentes: uno para mostrar la lista de elementos, uno para agregar nuevos elementos, uno para editar elementos existentes y uno para ver los detalles de un elemento específico.

Puedes crear un nuevo componente utilizando el siguiente comando:


ng generate component list
ng generate component add
ng generate component edit
ng generate component details


Esto creará cuatro carpetas dentro de la carpeta ‘src/app’, una para cada componente. Ahora podemos editar el HTML y TypeScript de cada componente para implementar las funcionalidades de nuestro CRUD.

Integración con la API RESTful

Para conectar nuestra interfaz de usuario de Angular con la API RESTful que creamos en la parte 1, podemos utilizar Angular’s HttpClient para realizar solicitudes HTTP a nuestra API. Por ejemplo, para obtener la lista de elementos, podemos hacer lo siguiente en nuestro componente ‘list’:


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

ngOnInit() {
this.http.get('http://localhost:3000/items')
.subscribe((data: any) => {
this.items = data;
});
}


De esta manera, estamos realizando una solicitud GET a la ruta ‘/items’ de nuestra API y asignando la respuesta a la variable ‘items’ en nuestro componente.

Conclusión

En esta segunda parte del tutorial, hemos aprendido a configurar un proyecto de Angular, crear componentes para implementar un CRUD y conectar nuestra interfaz de usuario con la API RESTful que creamos en la parte 1. Con esta configuración, ahora podemos realizar operaciones CRUD en nuestra base de datos MySQL a través de una interfaz de usuario interactiva. En la próxima parte de este tutorial, exploraremos cómo agregar autenticación de usuario y seguridad a nuestra aplicación.