¿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

  1. Generar el Servicio: Utiliza Angular CLI para generar un servicio.

    ng generate service my-service
    

    Esto creará dos archivos: my-service.service.ts y my-service.service.spec.ts.

  2. 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!';
      }
    }
    
  3. 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();
      }
    }
    
  4. 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

ng generate service data

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

  1. Generar el Servicio: Utiliza Angular CLI para generar un servicio llamado auth.

    ng generate service auth
    
  2. 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;
      }
    }
    
  3. 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();
      }
    }
    
  4. 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

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

© Copyright 2024. Todos los derechos reservados