Tutorial Angular y Node.js: Cómo Crear una Aplicación Web Full-Stack Completa

En este tutorial Angular Node.js, aprenderás paso a paso cómo crear una aplicación web full-stack, combinando el poder de Angular para el desarrollo frontend con Node.js y Express para el backend. También integraremos una base de datos MongoDB para la gestión de datos y finalizaremos con un despliegue básico. Este tutorial está pensado para desarrolladores con conocimientos básicos en JavaScript que desean profundizar en el desarrollo frontend y backend.

Índice

Configuración del Entorno de Desarrollo
Creación de la Aplicación Angular (Frontend)
Manejo de Rutas en Angular
Configuración del Backend con Node.js y Express
Conexión a MongoDB
Comunicación entre Angular y Node.js mediante API REST
Despliegue Básico de la Aplicación
Conclusión y Buenas Prácticas

Configuración del Entorno de Desarrollo

Antes de comenzar a codificar, asegúrate de tener instaladas las siguientes herramientas:

Node.js y npm (Node Package Manager).
Angular CLI para crear proyectos Angular y gestionar componentes.
MongoDB (puede ser local o en la nube, por ejemplo MongoDB Atlas).

Paso 1: Instalar Node.js y npm

Dirígete a nodejs.org y descarga la versión LTS (recomendado). Verifica la instalación con:

node -v
npm -v

node -v

npm -v

Paso 2: Instalar Angular CLI

npm install -g @angular/cli

1 2	npm install -g @angular/cli

Verifica su instalación:

ng version

1 2	ng version

Paso 3: Instalar MongoDB

Si prefieres usar una base de datos local, descarga MongoDB Community Edition desde mongodb.com y sigue las instrucciones según tu sistema operativo.

Alternativamente, crea una cuenta gratuita en MongoDB Atlas y configura un cluster en la nube.

Creación de la Aplicación Angular (Frontend)

Vamos a crear una sencilla aplicación Angular para mostrar y agregar elementos (por ejemplo, tareas).

Paso 1: Crear nuevo proyecto Angular

ng new angular-node-app --routing --style=css

1 2	ng new angular-node-app --routing --style=css

--routing habilita el manejo de rutas.
--style=css configura el CSS como preprocesador.

Paso 2: Navegar al proyecto e iniciar servidor de desarrollo

cd angular-node-app
ng serve --open

cd angular-node-app

ng serve --open

Se abrirá el navegador en http://localhost:4200.

Paso 3: Crear un componente principal de “Tareas”

ng generate component tasks

1 2	ng generate component tasks

Esto creará el componente con sus archivos TypeScript, HTML y CSS.

Paso 4: Crear un servicio para manejar la comunicación con el backend

ng generate service services/task

1 2	ng generate service services/task

Este servicio usará HttpClient para comunicarse con la API REST.

Código básico para el servicio de tareas (src/app/services/task.service.ts)

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

export interface Task {
  _id?: string;
  title: string;
  completed: boolean;
}

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

  constructor(private http: HttpClient) { }

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

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

import { Injectable } from '@angular/core';

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

import { Observable } from 'rxjs';

export interface Task {

_id?: string;

title: string;

completed: boolean;

}

@Injectable({

providedIn: 'root'

})

export class TaskService {

private apiUrl = 'http://localhost:3000/api/tasks';

constructor(private http: HttpClient) { }

getTasks(): Observable<Task[]> {

return this.http.get<Task[]>(this.apiUrl);

}

addTask(task: Task): Observable<Task> {

return this.http.post<Task>(this.apiUrl, task);

}

Paso 5: Modificar el componente para mostrar tareas y un formulario para agregar nuevas

Edita src/app/tasks/tasks.component.ts:

import { Component, OnInit } from '@angular/core';
import { Task, TaskService } from '../services/task.service';

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css']
})
export class TasksComponent implements OnInit {
  tasks: Task[] = [];
  newTaskTitle = '';

  constructor(private taskService: TaskService) { }

  ngOnInit(): void {
    this.loadTasks();
  }

  loadTasks(): void {
    this.taskService.getTasks().subscribe(tasks => this.tasks = tasks);
  }

  addTask(): void {
    if (!this.newTaskTitle.trim()) return;

    const task: Task = {title: this.newTaskTitle, completed: false};
    this.taskService.addTask(task).subscribe(newTask => {
      this.tasks.push(newTask);
      this.newTaskTitle = '';
    });
  }
}

import { Component, OnInit } from '@angular/core';

import { Task, TaskService } from '../services/task.service';

@Component({

selector: 'app-tasks',

templateUrl: './tasks.component.html',

styleUrls: ['./tasks.component.css']

})

export class TasksComponent implements OnInit {

tasks: Task[] = [];

newTaskTitle = '';

constructor(private taskService: TaskService) { }

ngOnInit(): void {

this.loadTasks();

}

loadTasks(): void {

this.taskService.getTasks().subscribe(tasks => this.tasks = tasks);

}

addTask(): void {

if (!this.newTaskTitle.trim()) return;

const task: Task = {title: this.newTaskTitle, completed: false};

this.taskService.addTask(task).subscribe(newTask => {

this.tasks.push(newTask);

this.newTaskTitle = '';

});

}

Y su vista tasks.component.html:

<h2>Lista de Tareas</h2>
<ul>
  <li *ngFor="let task of tasks">
    {{ task.title }}
  </li>
</ul>

<input [(ngModel)]="newTaskTitle" placeholder="Nueva tarea" />
<button (click)="addTask()">Agregar</button>

<h2>Lista de Tareas</h2>

<ul>

</li>

</ul>

<button (click)="addTask()">Agregar</button>

Paso 6: Importar módulos necesarios

En app.module.ts importa HttpClientModule y FormsModule:

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

@NgModule({
  declarations: [/*...*/],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { FormsModule } from '@angular/forms';

@NgModule({

declarations: [/*...*/],

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule,

FormsModule

bootstrap: [AppComponent]

})

export class AppModule { }

Manejo de Rutas en Angular

Para mostrar el componente de tareas cuando el usuario acceda a /tasks, vamos a configurar las rutas.

Edita src/app/app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TasksComponent } from './tasks/tasks.component';

const routes: Routes = [
  { path: '', redirectTo: '/tasks', pathMatch: 'full' },
  { path: 'tasks', component: TasksComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { TasksComponent } from './tasks/tasks.component';

const routes: Routes = [

{ path: '', redirectTo: '/tasks', pathMatch: 'full' },

{ path: 'tasks', component: TasksComponent }

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Ahora, visitando http://localhost:4200/ serás redirigido automáticamente a /tasks.

Configuración del Backend con Node.js y Express

Paso 1: Crear carpeta backend

Fuera del directorio Angular, crea la carpeta backend:

mkdir backend
cd backend
npm init -y

mkdir backend

cd backend

npm init -y

Paso 2: Instalar dependencias

npm install express mongoose cors body-parser

1 2	npm install express mongoose cors body-parser

express: framework para el servidor
mongoose: para conectar y modelar MongoDB
cors: para evitar problemas de CORS
body-parser: para leer cuerpos JSON

Paso 3: Crear servidor básico

Crea archivo server.js:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();

// Middleware
app.use(cors());
app.use(bodyParser.json());

// Conexión a MongoDB
mongoose.connect('mongodb://localhost:27017/angular_node_app', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => console.log('MongoDB conectado'))
.catch(err => console.error('Error de conexión', err));

// Modelo Tarea
const TaskSchema = new mongoose.Schema({
  title: String,
  completed: Boolean
});

const Task = mongoose.model('Task', TaskSchema);

// Rutas API
app.get('/api/tasks', async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
});

app.post('/api/tasks', async (req, res) => {
  const taskData = req.body;
  const task = new Task(taskData);
  await task.save();
  res.json(task);
});

// Iniciar servidor
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Servidor backend en puerto ${PORT}`);
});

const express = require('express');

const mongoose = require('mongoose');

const cors = require('cors');

const bodyParser = require('body-parser');

const app = express();

// Middleware

app.use(cors());

app.use(bodyParser.json());

// Conexión a MongoDB

mongoose.connect('mongodb://localhost:27017/angular_node_app', {

useNewUrlParser: true,

useUnifiedTopology: true

})

.then(() => console.log('MongoDB conectado'))

.catch(err => console.error('Error de conexión', err));

// Modelo Tarea

const TaskSchema = new mongoose.Schema({

title: String,

completed: Boolean

});

const Task = mongoose.model('Task', TaskSchema);

// Rutas API

app.get('/api/tasks', async (req, res) => {

const tasks = await Task.find();

res.json(tasks);

});

app.post('/api/tasks', async (req, res) => {

const taskData = req.body;

const task = new Task(taskData);

await task.save();

res.json(task);

});

// Iniciar servidor

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

console.log(`Servidor backend en puerto ${PORT}`);

});

Paso 4: Ejecutar backend

node server.js

1 2	node server.js

Verifica que en la consola aparezca “MongoDB conectado” y “Servidor backend en puerto 3000”.

Conexión a MongoDB

Se conecta automáticamente con la cadena:

mongodb://localhost:27017/angular_node_app

1 2	mongodb://localhost:27017/angular_node_app

Si usas MongoDB Atlas, reemplaza por la URL que te provea Atlas (asegúrate de mantener las comillas y reemplazar usuario, contraseña y cluster). Ejemplo:

mongoose.connect('mongodb+srv://usuario:contraseña@cluster0.mongodb.net/angular_node_app?retryWrites=true&w=majority', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})

mongoose.connect('mongodb+srv://usuario:contraseña@cluster0.mongodb.net/angular_node_app?retryWrites=true&w=majority', {

useNewUrlParser: true,

useUnifiedTopology: true

})

Comunicación entre Angular y Node.js mediante API REST

Gracias al servicio Angular TaskService, en el frontend hacemos peticiones HTTP que el backend procesa para almacenar o recuperar datos de MongoDB.

Asegúrate que el backend esté corriendo (localhost:3000) y el frontend también (localhost:4200).

Cuando agregues una tarea en Angular, esta envía un POST a /api/tasks y cuando abres la lista, hace un GET para mostrar todas.

Despliegue Básico de la Aplicación

Paso 1: generar build de Angular

En el directorio del proyecto Angular ejecuta:

ng build --prod

1 2	ng build --prod

Esto crea una carpeta dist/angular-node-app con archivos estáticos optimizados.

Paso 2: Servir Angular desde Express

Modifica server.js para servir los archivos estáticos:

const path = require('path');

// ... código existente de express y mongoose

// Servir frontend Angular estático
app.use(express.static(path.join(__dirname, '../angular-node-app/dist/angular-node-app')));

// Manejar rutas que no son API
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../angular-node-app/dist/angular-node-app/index.html'));
});

// Iniciar servidor
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Servidor full-stack corriendo en puerto ${PORT}`);
});

const path = require('path');

// ... código existente de express y mongoose

// Servir frontend Angular estático

app.use(express.static(path.join(__dirname, '../angular-node-app/dist/angular-node-app')));

// Manejar rutas que no son API

app.get('*', (req, res) => {

res.sendFile(path.join(__dirname, '../angular-node-app/dist/angular-node-app/index.html'));

});

// Iniciar servidor

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

console.log(`Servidor full-stack corriendo en puerto ${PORT}`);

});

Paso 3: Ejecuta servidor backend cuya función ahora es full-stack

node server.js

1 2	node server.js

Abre el navegador en http://localhost:3000 y deberías ver la aplicación Angular interactuando con el backend.

Conclusión y Buenas Prácticas

En este tutorial Angular Node.js hemos cubierto todo lo necesario para crear una aplicación web full-stack:

Configuración del entorno de desarrollo para frontend y backend.
Creación de componentes y servicios Angular.
Manejo de rutas en Angular.
Configuración de un servidor Express y conexión a MongoDB.
Comunicación vía API REST.
Despliegue básico integrando ambos extremos.

Buenas prácticas recomendadas:

Separar responsabilidades: El backend se encargará sólo de lógica y datos, el frontend de interfaz y usabilidad.
Gestión de errores: Añade manejo de errores en las peticiones HTTP en ambos lados.
Variables de entorno: No guardes cadenas de conexión o puertos directamente, usa archivos .env.
Seguridad: Limita permisos de la base de datos y valida los datos recibidos.
Optimización del build: Aprovecha las opciones de optimización de Angular.

Si quieres profundizar, agrega autenticación, mejores estilos y despliegue en plataformas como Heroku o Vercel.

¿Listo para crear tu app con Angular y Node.js? Empieza hoy mismo y explora todo el potencial del desarrollo frontend y backend moderno.

¡Comparte este tutorial si te ha gustado y comenta tus dudas!