El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

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 sean más 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 lógica de negocio, realizar operaciones de red, gestionar datos compartidos, entre otras tareas.

Ventajas de Usar Servicios

Reutilización de Código: Los servicios permiten reutilizar lógica de negocio en diferentes partes de la aplicación.
Separación de Responsabilidades: Los componentes se enfocan en la presentación, mientras que los servicios manejan la lógica de negocio.
Facilidad de Pruebas: Los servicios pueden ser fácilmente probados de manera aislada.

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, puedes ejecutar:

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 maneja datos de usuarios:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private users: string[] = ['Alice', 'Bob', 'Charlie'];

  constructor() { }

  getUsers(): string[] {
    return this.users;
  }

  addUser(user: string): void {
    this.users.push(user);
  }
}

En este ejemplo:

@Injectable({ providedIn: 'root' }): Este decorador indica que el servicio debe ser proporcionado en el nivel raíz, lo que significa que estará disponible en toda la aplicación.
getUsers(): Método para obtener la lista de usuarios.
addUser(user: string): Método para agregar un nuevo usuario a la lista.

Uso de Servicios en Componentes

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

Ejemplo de Uso de Servicio en un Componente

Supongamos que tienes un componente llamado UserComponent y quieres usar el DataService para mostrar y agregar usuarios.

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

@Component({
  selector: 'app-user',
  template: `
    <div>
      <h2>Users</h2>
      <ul>
        <li *ngFor="let user of users">{{ user }}</li>
      </ul>
      <input [(ngModel)]="newUser" placeholder="Add a user">
      <button (click)="addUser()">Add</button>
    </div>
  `,
  styles: []
})
export class UserComponent implements OnInit {
  users: string[] = [];
  newUser: string = '';

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.users = this.dataService.getUsers();
  }

  addUser(): void {
    if (this.newUser) {
      this.dataService.addUser(this.newUser);
      this.newUser = '';
      this.users = this.dataService.getUsers();
    }
  }
}

En este ejemplo:

DataService se inyecta en el constructor del componente.
ngOnInit(): Método del ciclo de vida del componente que se ejecuta después de que Angular inicializa las propiedades del componente. Aquí se obtiene la lista de usuarios del servicio.
addUser(): Método que agrega un nuevo usuario usando el servicio y actualiza la lista de usuarios.

Ejercicio Práctico

Ejercicio

Crea un nuevo servicio llamado product.
En el servicio ProductService, define un método getProducts() que devuelva una lista de productos.
Crea un componente llamado ProductComponent.
Inyecta el ProductService en el ProductComponent y usa el método getProducts() para mostrar la lista de productos en la plantilla del componente.

Solución

Crear el servicio ProductService:

ng generate service product

Definir el método getProducts() en ProductService:

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

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private products: string[] = ['Product1', 'Product2', 'Product3'];

  constructor() { }

  getProducts(): string[] {
    return this.products;
  }
}

Crear el componente ProductComponent:

ng generate component product

Inyectar ProductService en ProductComponent y usar getProducts():

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';

@Component({
  selector: 'app-product',
  template: `
    <div>
      <h2>Products</h2>
      <ul>
        <li *ngFor="let product of products">{{ product }}</li>
      </ul>
    </div>
  `,
  styles: []
})
export class ProductComponent implements OnInit {
  products: string[] = [];

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.products = this.productService.getProducts();
  }
}

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 del código y la realización de pruebas. En el próximo módulo, exploraremos la inyección de dependencias en mayor detalle, lo que nos permitirá comprender mejor cómo Angular gestiona la creación y el suministro de servicios.

Creación y Uso de Servicios

¿Qué es un Servicio en Angular?

Ventajas de Usar Servicios

Creación de un Servicio

Ejemplo de Servicio

Uso de Servicios en Componentes

Ejemplo de Uso de Servicio en un Componente

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

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

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas