El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Creación y Uso de Servicios

Siguiente ►
►

En Angular, los servicios son una forma de compartir datos y lógica entre diferentes partes de una aplicación. Los servicios permiten que los componentes se mantengan limpios y enfocados en la presentación, delegando la lógica de negocio y la gestión de datos a los servicios.

¿Qué es un Servicio en Angular?

Un servicio en Angular es una clase que se puede inyectar en componentes y otros servicios usando el sistema de inyección de dependencias de Angular. Los servicios se utilizan para encapsular la lógica de negocio, realizar operaciones de red, gestionar datos compartidos, entre otras tareas.

Características Clave de los Servicios:

  • Reutilizables: Los servicios pueden ser utilizados por múltiples componentes.
  • Encapsulación: Encapsulan la lógica de negocio y la gestión de datos.
  • Inyección de Dependencias: Se inyectan en componentes y otros servicios.

Creación de un Servicio

Para crear un servicio en Angular, puedes usar el Angular CLI. El comando para generar un servicio es:

ng generate service nombre-del-servicio

Por ejemplo, para crear un servicio llamado data, ejecuta:

ng generate service data

Esto generará dos archivos:

  • data.service.ts: Contiene la definición del servicio.
  • data.service.spec.ts: Contiene las pruebas unitarias para el servicio.

Ejemplo de Servicio

A continuación, se muestra un ejemplo básico de un servicio que gestiona una lista de elementos:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private items: string[] = [];

  constructor() { }

  addItem(item: string) {
    this.items.push(item);
  }

  getItems(): string[] {
    return this.items;
  }

  clearItems() {
    this.items = [];
  }
}

Explicación del Código

  • @Injectable: El decorador @Injectable marca la clase como un servicio que puede ser inyectado. La propiedad providedIn: 'root' indica que el servicio es un singleton y está disponible en toda la aplicación.
  • Métodos del Servicio:
    • addItem(item: string): Agrega un elemento a la lista.
    • getItems(): Devuelve la lista de elementos.
    • clearItems(): Limpia la lista de elementos.

Uso de un Servicio en un Componente

Para usar un servicio en un componente, primero debes inyectarlo en el constructor del componente.

Ejemplo de Uso del Servicio

Supongamos que tenemos un componente llamado ItemListComponent que utiliza el DataService para gestionar una lista de elementos.

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-item-list',
  template: `
    <div>
      <input [(ngModel)]="newItem" placeholder="Add new item">
      <button (click)="addItem()">Add</button>
    </div>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    <button (click)="clearItems()">Clear</button>
  `,
  styles: []
})
export class ItemListComponent implements OnInit {
  newItem: string = '';
  items: string[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.items = this.dataService.getItems();
  }

  addItem() {
    if (this.newItem) {
      this.dataService.addItem(this.newItem);
      this.newItem = '';
      this.items = this.dataService.getItems();
    }
  }

  clearItems() {
    this.dataService.clearItems();
    this.items = [];
  }
}

Explicación del Código

  • Inyección del Servicio: El servicio DataService se inyecta en el constructor del componente.
  • ngOnInit: En el método ngOnInit, se inicializa la lista de elementos llamando al método getItems del servicio.
  • addItem: Este método agrega un nuevo elemento a la lista utilizando el método addItem del servicio y luego actualiza la lista de elementos.
  • clearItems: Este método limpia la lista de elementos utilizando el método clearItems del servicio.

Ejercicio Práctico

Ejercicio 1: Crear un Servicio de Autenticación

  1. Crear el Servicio: Usa el Angular CLI para crear un servicio llamado auth.
  2. Definir Métodos: Define los siguientes métodos en el servicio:
    • login(username: string, password: string): Simula un inicio de sesión.
    • logout(): Simula un cierre de sesión.
    • isLoggedIn(): Devuelve un booleano indicando si el usuario está autenticado.
  3. Usar el Servicio: Crea un componente que use el servicio AuthService para gestionar el estado de autenticación.

Solución

Paso 1: Crear el Servicio

ng generate service auth

Paso 2: Definir Métodos en el Servicio

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private loggedIn: boolean = false;

  constructor() { }

  login(username: string, password: string): boolean {
    // Simulación de autenticación
    if (username === 'user' && password === 'password') {
      this.loggedIn = true;
      return true;
    }
    return false;
  }

  logout() {
    this.loggedIn = false;
  }

  isLoggedIn(): boolean {
    return this.loggedIn;
  }
}

Paso 3: Usar el Servicio en un Componente

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  template: `
    <div *ngIf="!authService.isLoggedIn()">
      <input [(ngModel)]="username" placeholder="Username">
      <input [(ngModel)]="password" type="password" placeholder="Password">
      <button (click)="login()">Login</button>
    </div>
    <div *ngIf="authService.isLoggedIn()">
      <p>Welcome, {{ username }}!</p>
      <button (click)="logout()">Logout</button>
    </div>
  `,
  styles: []
})
export class LoginComponent {
  username: string = '';
  password: string = '';

  constructor(public authService: AuthService) { }

  login() {
    if (this.authService.login(this.username, this.password)) {
      this.username = '';
      this.password = '';
    } else {
      alert('Invalid credentials');
    }
  }

  logout() {
    this.authService.logout();
  }
}

Explicación del Código

  • AuthService: El servicio AuthService gestiona el estado de autenticación.
  • LoginComponent: El componente LoginComponent utiliza el servicio AuthService para iniciar y cerrar sesión.

Conclusión

En esta sección, hemos aprendido cómo crear y usar servicios en Angular. Los servicios son fundamentales para mantener la lógica de negocio separada de los componentes, lo que facilita la reutilización y el mantenimiento del código. Hemos visto cómo crear un servicio, inyectarlo en un componente y utilizarlo para gestionar datos y lógica de negocio. En el próximo módulo, exploraremos el enrutamiento y la navegación en Angular.

◄ Anterior
◄
Siguiente ►
►

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

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados