¿Qué es un Servicio en Angular?
En Angular, un servicio es una clase que se utiliza para compartir datos, lógica y funcionalidades entre diferentes componentes de la aplicación. Los servicios permiten que el código sea más modular, reutilizable y fácil de mantener. Los servicios se pueden inyectar en componentes y otros servicios utilizando el sistema de inyección de dependencias de Angular.
Características Clave de los Servicios
- Reutilización de Código: Los servicios permiten encapsular la lógica de negocio y compartirla entre múltiples componentes.
- Separación de Responsabilidades: Ayudan a mantener los componentes enfocados en la presentación y delegan la lógica de negocio a los servicios.
- Inyección de Dependencias: Angular proporciona un mecanismo robusto para inyectar servicios en componentes y otros servicios.
Creación de un Servicio
Para crear un servicio en Angular, se utiliza el decorador @Injectable()
. Este decorador indica que la clase puede ser inyectada como una dependencia.
Paso a Paso para Crear un Servicio
-
Generar el Servicio: Utiliza Angular CLI para generar un servicio.
ng generate service my-service
Esto creará dos archivos:
my-service.service.ts
ymy-service.service.spec.ts
. -
Definir el Servicio: Abre el archivo
my-service.service.ts
y define la lógica del servicio.import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class MyService { constructor() { } getData(): string { return 'Hello from MyService!'; } }
-
Inyectar el Servicio en un Componente: Abre un componente y modifica su constructor para inyectar el servicio.
import { Component, OnInit } from '@angular/core'; import { MyService } from './my-service.service'; @Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent implements OnInit { message: string; constructor(private myService: MyService) { } ngOnInit(): void { this.message = this.myService.getData(); } }
-
Mostrar los Datos en la Plantilla: Modifica la plantilla del componente para mostrar los datos proporcionados por el servicio.
<p>{{ message }}</p>
Ejemplo Práctico
Paso 1: Generar el Servicio
Paso 2: Definir el Servicio
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class DataService { private data: string[] = ['Angular', 'React', 'Vue']; constructor() {} getData(): string[] { return this.data; } addData(item: string): void { this.data.push(item); } }
Paso 3: Inyectar el Servicio en un Componente
import { Component, OnInit } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-data-list', templateUrl: './data-list.component.html', styleUrls: ['./data-list.component.css'] }) export class DataListComponent implements OnInit { items: string[]; constructor(private dataService: DataService) { } ngOnInit(): void { this.items = this.dataService.getData(); } addItem(newItem: string): void { this.dataService.addData(newItem); this.items = this.dataService.getData(); } }
Paso 4: Modificar la Plantilla del Componente
<ul> <li *ngFor="let item of items">{{ item }}</li> </ul> <input #newItem type="text"> <button (click)="addItem(newItem.value)">Add Item</button>
Ejercicio Práctico
Ejercicio 1: Crear un Servicio de Autenticación
-
Generar el Servicio: Utiliza Angular CLI para generar un servicio llamado
auth
.ng generate service auth
-
Definir el Servicio: Implementa métodos para iniciar sesión, cerrar sesión y verificar si el usuario está autenticado.
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class AuthService { private isAuthenticated: boolean = false; constructor() {} login(): void { this.isAuthenticated = true; } logout(): void { this.isAuthenticated = false; } checkAuth(): boolean { return this.isAuthenticated; } }
-
Inyectar el Servicio en un Componente: Crea un componente que utilice el servicio de autenticación.
import { Component } from '@angular/core'; import { AuthService } from './auth.service'; @Component({ selector: 'app-auth', templateUrl: './auth.component.html', styleUrls: ['./auth.component.css'] }) export class AuthComponent { constructor(public authService: AuthService) { } login(): void { this.authService.login(); } logout(): void { this.authService.logout(); } }
-
Modificar la Plantilla del Componente: Añade botones para iniciar y cerrar sesión, y muestra el estado de autenticación.
<button (click)="login()">Login</button> <button (click)="logout()">Logout</button> <p *ngIf="authService.checkAuth()">User is authenticated</p> <p *ngIf="!authService.checkAuth()">User is not authenticated</p>
Solución del Ejercicio
La solución del ejercicio se encuentra en los pasos anteriores. Asegúrate de seguir cada paso y verificar que el servicio de autenticación funcione correctamente.
Conclusión
En esta lección, hemos aprendido qué son los servicios en Angular, cómo crearlos y cómo inyectarlos en componentes. Los servicios son una herramienta poderosa para compartir datos y lógica entre diferentes partes de la aplicación, promoviendo la reutilización de código y la separación de responsabilidades. En la próxima lección, profundizaremos en la creación y uso de servicios, así como en la inyección de dependencias.
Curso de Angular
Módulo 1: Introducción a Angular
- ¿Qué es Angular?
- Configuración del Entorno de Desarrollo
- Arquitectura de Angular
- Primera Aplicación Angular
Módulo 2: Componentes de Angular
- Entendiendo los Componentes
- Creación de Componentes
- Plantillas de Componentes
- Estilos de Componentes
- Interacción entre Componentes
Módulo 3: Enlace de Datos y Directivas
- Interpolación y Enlace de Propiedades
- Enlace de Eventos
- Enlace de Datos Bidireccional
- Directivas Incorporadas
- Directivas Personalizadas
Módulo 4: Servicios e Inyección de Dependencias
- Introducción a los Servicios
- Creación y Uso de Servicios
- Inyección de Dependencias
- Inyectores Jerárquicos
Módulo 5: Enrutamiento y Navegación
Módulo 6: Formularios en Angular
- Formularios Basados en Plantillas
- Formularios Reactivos
- Validación de Formularios
- Formularios Dinámicos
Módulo 7: Cliente HTTP y Observables
- Introducción al Cliente HTTP
- Realizando Solicitudes HTTP
- Manejo de Respuestas HTTP
- Uso de Observables
- Manejo de Errores
Módulo 8: Gestión de Estado
- Introducción a la Gestión de Estado
- Uso de Servicios para la Gestión de Estado
- NgRx Store
- NgRx Effects
- NgRx Entity
Módulo 9: Pruebas en Angular
- Pruebas Unitarias
- Pruebas de Componentes
- Pruebas de Servicios
- Pruebas de Extremo a Extremo
- Simulación de Dependencias
Módulo 10: Conceptos Avanzados de Angular
- Angular Universal
- Optimización del Rendimiento
- Internacionalización (i18n)
- Pipes Personalizados
- Animaciones en Angular