Cómo crear un servicio en Angular
Un servicio en Angular permite centralizar la lógica de negocio y reutilizar código en diferentes componentes. Los servicios facilitan la comunicación entre componentes y el manejo de datos en la aplicación.
Crear un servicio en Angular
Para generar un servicio en Angular, sigue estos pasos:
1. Abre la terminal y ejecuta:
ng generate service nombre-del-servicioEsto creará dos archivos:
-
nombre-del-servicio.service.ts -
nombre-del-servicio.service.spec.ts(para pruebas)
2. Define la lógica en el servicio
Abre el archivo nombre-del-servicio.service.ts y agrégale métodos según las necesidades de tu aplicación:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class NombreDelServicioService {
constructor() { }
obtenerDatos() {
return ['Dato 1', 'Dato 2', 'Dato 3'];
}
}3. Inyectar el servicio en un componente
Para usar el servicio en un componente, primero impórtalo y agrégalo en el constructor:
import { Component, OnInit } from '@angular/core';
import { NombreDelServicioService } from '../nombre-del-servicio.service';
@Component({
selector: 'app-mi-componente',
templateUrl: './mi-componente.component.html',
styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent implements OnInit {
datos: string[] = [];
constructor(private miServicio: NombreDelServicioService) { }
ngOnInit() {
this.datos = this.miServicio.obtenerDatos();
}
}Ejemplos de uso
-
Llamadas a APIs: Un servicio puede gestionar peticiones HTTP con
HttpClient. - Gestión de estado: Se pueden almacenar y compartir datos entre componentes.
- Lógica de negocio: Funciones comunes pueden agruparse en un servicio para evitar código duplicado.
Jorge García
Fullstack developer