Creando un CRUD con NestJS y Angular

Cuando hablamos de desarrollo full-stack en JavaScript, NestJS y Angular son una combinación poderosa. NestJS, un framework backend que utiliza TypeScript, ofrece una arquitectura modular basada en controladores y servicios. Por otro lado, Angular facilita la creación de interfaces dinámicas y altamente interactivas en el frontend. En este artículo, veremos cómo construir un CRUD (Create, Read, Update, Delete) básico con estos dos frameworks.

¿Qué Necesitas?

Antes de empezar, asegúrate de tener instalados:

• Node.js y npm (o Yarn)
• Nest CLI: npm install -g @nestjs/cli
• Angular CLI: npm install -g @angular/cli

1. Configurando el Backend con NestJS

Comenzamos generando el proyecto NestJS:

nest new backend
cd backend

Creación del Módulo y Controlador

Para nuestro CRUD, necesitamos un módulo y controlador básicos para gestionar los recursos. Por ejemplo, si gestionamos "tareas":

nest g module tasks
nest g controller tasks
nest g service tasks

Implementación del Servicio

En el archivo tasks.service.ts, implementamos la lógica para manejar datos (pueden ser almacenados temporalmente en un array):

import { Injectable } from '@nestjs/common';

@Injectable()
export class TasksService {
  private tasks = [];

  create(task) {
    this.tasks.push(task);
    return task;
  }

  findAll() {
    return this.tasks;
  }

  update(id, updatedTask) {
    this.tasks[id] = updatedTask;
    return updatedTask;
  }

  delete(id) {
    const task = this.tasks.splice(id, 1);
    return task;
  }
}

Rutas en el Controlador

Define las rutas en el controlador tasks.controller.ts:

import { Controller, Get, Post, Body, Put, Delete, Param } from '@nestjs/common';
import { TasksService } from './tasks.service';

@Controller('tasks')
export class TasksController {
  constructor(private readonly tasksService: TasksService) {}

  @Post()
  create(@Body() task) {
    return this.tasksService.create(task);
  }

  @Get()
  findAll() {
    return this.tasksService.findAll();
  }

  @Put(':id')
  update(@Param('id') id: string, @Body() task) {
    return this.tasksService.update(+id, task);
  }

  @Delete(':id')
  delete(@Param('id') id: string) {
    return this.tasksService.delete(+id);
  }
}

Ejecuta el servidor con npm run start y prueba las rutas con herramientas como Postman o Thunder Client.

2. Configurando el Frontend con Angular

Ahora configuraremos el frontend con Angular. Crea un nuevo proyecto:

ng new frontend
cd frontend

Servicio para el CRUD

Generamos un servicio para manejar las llamadas al backend:

ng g service services/tasks

En el archivo tasks.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class TasksService {
  private apiUrl = 'http://localhost:3000/tasks';

  constructor(private http: HttpClient) {}

  getTasks(): Observable<any> {
    return this.http.get(this.apiUrl);
  }

  createTask(task): Observable<any> {
    return this.http.post(this.apiUrl, task);
  }

  updateTask(id, task): Observable<any> {
    return this.http.put(`${this.apiUrl}/${id}`, task);
  }

  deleteTask(id): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}

Interfaz de Usuario

Generamos un componente para visualizar las tareas:

ng g component components/task-list

En el componente, puedes utilizar el servicio para mostrar y manipular las tareas en el frontend.

Conclusión

Con esta implementación básica, ya tienes un CRUD funcional utilizando NestJS en el backend y Angular en el frontend. Esta combinación no solo te ofrece un flujo de trabajo eficiente, sino que también asegura una alta escalabilidad para proyectos más complejos. ¡Sigue explorando y mejorando esta estructura para adaptarla a tus necesidades!