Los servicios en Angular son clases especializadas diseñadas para proporcionar datos y lógica de negocio a distintos componentes de una aplicación, permitiendo mantener el código organizado, modular y reutilizable.

En esta guía paso a paso aprenderás a dominar los servicios en Angular, desde la creación de tu primera clase inyectable hasta el consumo de APIs REST con HttpClient y las últimas convenciones de sintaxis del framework.

¿Qué son los Servicios en Angular y por qué los necesitas?

Un servicio en Angular es una clase especializada con un propósito bien definido: centralizar lógica de negocio, procesar datos y compartirlos entre distintos componentes.

Piensa en los componentes como la capa visual (HTML y CSS) y en los servicios en Angular como los trabajadores incansables detrás de escena. Ellos se encargan del trabajo pesado: realizar peticiones a un servidor, validar información de formularios o gestionar el estado global.

El Principio DRY (Don’t Repeat Yourself): La regla de oro en el desarrollo web es separar la lógica de presentación de la lógica de datos. Si dos componentes necesitan la misma información, nunca dupliques código; delega esa tarea a un servicio.

Ventajas principales:

• Reutilización de código: Un solo servicio puede abastecer a múltiples partes de tu aplicación.
• Patrón Singleton: Por defecto, Angular crea una única instancia compartida para toda la app.
• Mantenibilidad: Si la URL de una API cambia, solo editas un archivo en lugar de buscar en diez componentes.

¿Cuándo debes usar un servicio?

Debes delegar responsabilidades a los servicios en Angular cuando necesites:

1. Consultar o persistir datos: Conectar con servidores mediante llamadas AJAX o guardar información en el localStorage.
2. Compartir estado: Mantener sincronizada la información entre componentes que no tienen una relación directa de padre a hijo (ej. un carrito de compras).
3. Encapsular lógica de negocio: Operaciones matemáticas, cálculos de impuestos o validaciones complejas.
4. Manejar llamadas asíncronas: Gestionar flujos de datos mediante HttpClient y reactividad con RxJS.

Cómo crear un servicio paso a paso

Existen dos formas de implementar un servicio: usando la herramienta de línea de comandos (Angular CLI) o estructurándolo a mano.

Método 1: Creación con Angular CLI (Recomendado)

La forma más rápida e ingenieril de generar un servicio es mediante la terminal. Si no sabes cómo usar la terminal, lo cual ya deberías porque eres un programador excelente, te invito a revisar la guia para dominar la linea de comandos.

Volviendo al caso. Suponiendo que ya tienes un proyecto creado en Angular y tienes una carpeta llamada services para guardar tus servicios, abre tu consola en la raíz del proyecto y ejecuta:

ng generate service services/task
# O su versión corta:
ng g s services/task

ng generate service services/task
# O su versión corta:
ng g s services/task

Este comando creará dos archivos dentro de la carpeta services:

• task.service.ts: El servicio con su estructura base.
• task.service.spec.ts: El archivo de pruebas unitarias.

Estructura por defecto generada:

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

@Injectable({
  providedIn: 'root' // Hace que el servicio esté disponible globalmente (Singleton)
})
export class TaskService{
  constructor() { }
}

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

@Injectable({
  providedIn: 'root' // Hace que el servicio esté disponible globalmente (Singleton)
})
export class TaskService{
  constructor() { }
}

Tip de arquitectura: Mantén tu código organizado desde el primer día. Te recomendamos guardar todos tus servicios globales dentro de la carpeta core/services/ o services/.

Método 2: Creación Manual

Para entender las tripas del framework, analicemos cómo se registra un servicio manualmente sin el flag providedIn: 'root':

1. Creas la clase básica mi-servicio.service.ts.
2. Agregas el decorador @Injectable().
3. Lo declaras en el array providers de tu módulo principal (app.module.ts):

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TaskService } from './services/task.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [TaskService], // Registro manual del proveedor
  bootstrap: [AppComponent]
})
export class AppModule{ }

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TaskService } from './services/task.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [TaskService], // Registro manual del proveedor
  bootstrap: [AppComponent]
})
export class AppModule{ }

Recomendación: Utiliza siempre providedIn: 'root' en la anotación @Injectable(). Esto habilita el Tree-shaking, permitiendo que el empaquetador elimine los servicios no utilizados en producción para reducir el tamaño de tu bundle.

Inyección de Dependencias: Tradicional vs. Función inject()

La Inyección de Dependencias (DI) es un patrón de diseño donde Angular se encarga de suministrar las instancias de los servicios a las clases que los requieren, evitando el uso manual del operador new.

Para profundizar más sobre patrones de diseño e integraciones modernas de Frontend, puedes revisar nuestras guías avanzadas sobre patrones de diseno.

Veamos las dos formas de inyectar los servicios en Angular:

1. Inyección por Constructor (Tradicional)

Es la forma histórica de Angular, inyectando el servicio como un parámetro privado dentro del constructor:

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

@Component({
  selector: 'app-task-list',
  template: `
    <ul>
      <li *ngFor="let task of tasks">{{ task }}</li>
    </ul>
  `
})
export class TaskListComponent implements OnInit{
  tasks: string[] = [];

  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.tasks = this.taskService.getTasks();
  }
}

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

@Component({
  selector: 'app-task-list',
  template: `
    <ul>
      <li *ngFor="let task of tasks">{{ task }}</li>
    </ul>
  `
})
export class TaskListComponent implements OnInit{
  tasks: string[] = [];

  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.tasks = this.taskService.getTasks();
  }
}

2. Función inject() (Estándar Moderno)

En las versiones recientes de Angular, la función inject() es el método recomendado. Proporciona una sintaxis más limpia, evita constructores recargados y facilita la herencia de clases.

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

@Component({
  selector: 'app-task-list',
  template: `
    <div *ngFor="let task of tasks">
      <p>{{ task }}</p>
    </div>
  `
})
export class TaskListComponent implements OnInit{
  // Inyección limpia y moderna mediante inject()
  private readonly taskService = inject(TaskService);
  tasks: string[] = [];

  ngOnInit(): void {
    this.tasks = this.taskService.getTasks();
  }
}

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

@Component({
  selector: 'app-task-list',
  template: `
    <div *ngFor="let task of tasks">
      <p>{{ task }}</p>
    </div>
  `
})
export class TaskListComponent implements OnInit{
  // Inyección limpia y moderna mediante inject()
  private readonly taskService = inject(TaskService);
  tasks: string[] = [];

  ngOnInit(): void {
    this.tasks = this.taskService.getTasks();
  }
}

Servicios Avanzados: Consumo de APIs con HttpClient

En proyectos reales, la función principal de los servicios en Angular es conectarse a endpoints RESTful mediante peticiones asíncronas.

Paso 1: Configurar el cliente HTTP

Asegúrate de importar el proveedor del cliente HTTP. En aplicaciones con arquitectura Standalone o en el app.module.ts:

// En app.config.ts (Angular Standalone moderno)
import { provideHttpClient } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient()
  ]
};

// En app.config.ts (Angular Standalone moderno)
import { provideHttpClient } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient()
  ]
};

Paso 2: Crear el servicio de API con TypeScript fuertemente tipado

Aprovecha la potencia de TypeScript definiendo interfaces para tus datos.

// models/task.interface.ts
export interface Task {
  id: number;
  title: string;
  completed: boolean;
}

// services/task.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Task } from '../models/task.interface';

@Injectable({
  providedIn: 'root'
})
export class TaskService{
  private readonly http = inject(HttpClient);
  private readonly apiUrl = '<https://jsonplaceholder.typicode.com/todos>';

  // GET: Obtener tareas desde el servidor
  getTasks(): Observable<Task[]> {
    return this.http.get<Task[]>(this.apiUrl);
  }

  // POST: Crear una nueva tarea
  addTask(task: Omit<Task, 'id'>): Observable<Task> {
    return this.http.post<Task>(this.apiUrl, task);
  }
}

// models/task.interface.ts
export interface Task {
  id: number;
  title: string;
  completed: boolean;
}

// services/task.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Task } from '../models/task.interface';

@Injectable({
  providedIn: 'root'
})
export class TaskService{
  private readonly http = inject(HttpClient);
  private readonly apiUrl = '<https://jsonplaceholder.typicode.com/todos>';

  // GET: Obtener tareas desde el servidor
  getTasks(): Observable<Task[]> {
    return this.http.get<Task[]>(this.apiUrl);
  }

  // POST: Crear una nueva tarea
  addTask(task: Omit<Task, 'id'>): Observable<Task> {
    return this.http.post<Task>(this.apiUrl, task);
  }
}

Paso 3: Consumir el servicio en el componente

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

@Component({
  selector: 'app-task-app',
  templateUrl: './task-app.component.html'
})
export class TaskAppComponent implements OnInit{
  private readonly taskService = inject(TaskService);
  tasks: Task[] = [];

  ngOnInit(): void {
    // Suscripción al Observable que retorna el servicio
    this.taskService.getTasks().subscribe({
      next: (data) => this.tasks = data,
      error: (err) => console.error('Error al consultar tareas:', err)
    });
  }
}

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

@Component({
  selector: 'app-task-app',
  templateUrl: './task-app.component.html'
})
export class TaskAppComponent implements OnInit{
  private readonly taskService = inject(TaskService);
  tasks: Task[] = [];

  ngOnInit(): void {
    // Suscripción al Observable que retorna el servicio
    this.taskService.getTasks().subscribe({
      next: (data) => this.tasks = data,
      error: (err) => console.error('Error al consultar tareas:', err)
    });
  }
}

Si además de dominar el Frontend buscas mejorar tus metodologías de estudio y flujo de trabajo para la universidad, domina las técnicas de productividad para estudiantes de tecnología.

Mejores Prácticas y Errores Comunes

Para escribir código limpio y profesional, ten en cuenta las siguientes recomendaciones clave:

• NUNCA instancies un servicio con new: Olvídate de hacer const miServicio = new MiServicio(). Esto rompe el contenedor de Inyección de Dependencias de Angular.
• Tipado estricto: Define siempre interfaces para los datos devueltos por las APIs. Evita usar el tipo any.
• No manipules el DOM dentro de los servicios: Los servicios no deben tener conocimiento de elementos HTML o interfaces de usuario; su rol es puramente lógico y de datos.
• Usa la sintaxis moderna inject(): Mantiene el código conciso, legible y alineado con los estándares actuales del ecosistema.

Conclusión y Desafío Práctico

Los servicios en Angular son la pieza fundamental para estructurar aplicaciones limpias, modulares y fáciles de escalar. Al mover la lógica de negocio fuera de los componentes, no solo consigues un código más ordenado, sino que también facilitas la escritura de pruebas unitarias y la reutilización de código en todo tu proyecto.

Reto del día: ¡Ve más allá de tus límites! 🚀

Te desafío a aplicar lo aprendido hoy:

1. Crea un nuevo proyecto en Angular.
2. Implementa un servicio genérico que gestione un estado local (ej. un servicio de carrito de compras o de favoritos).
3. Conéctalo a una API pública (como JSONPlaceholder) utilizando HttpClient y la función inject().

¿Tienes alguna duda sobre la Inyección de Dependencias o el uso de RxJS en los servicios? ¡Déjame tu comentario abajo! Estaré encantado de ayudarte a resolver tus dudas.

---

🧠 Aprendizaje continuo | 💻 Frontend + backend curioso | 🎶 Música y baile | 🎮 Videojuegos | ⚡ Productividad en cada paso

👉 Únete a mi Canal de WhatsApp para más recursos

👉 Sigueme en mis redes sociales para más contenido de programación y productividad

• Facebook
• Twitter
• Instagram
• LinkedIn
• GitHub
• WhatsApp

---

Por favor, deja este campo vacío

🚀 ¡Hackea tu productividad con IA!

Únete a mi comunidad de +100 artículos y descarga gratis mis 12 prompts maestros para reventar el semestre. Recibe tips de Frontend, Python y recursos que solo comparto por correo.

Prometo no llenar tu bandeja. Solo hacks útiles una vez al mes.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.