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

Introducción a los Servicios

Siguiente ►
►

¿Qué es un Servicio en Angular?

En Angular, un servicio es una clase que se utiliza para encapsular lógica de negocio, lógica de acceso a datos o cualquier otra funcionalidad que deba ser compartida entre diferentes componentes. Los servicios permiten que el código sea más modular, reutilizable y fácil de mantener.

Características Clave de los Servicios:

  • Reutilizables: Los servicios pueden ser utilizados por múltiples componentes.
  • Encapsulación: Encapsulan lógica de negocio y acceso a datos.
  • Inyección de Dependencias: Angular proporciona un mecanismo para inyectar servicios en componentes y otros servicios.

¿Por qué Usar Servicios?

  1. Separación de Responsabilidades: Mantiene la lógica de negocio separada de la lógica de presentación.
  2. Reutilización de Código: Permite reutilizar la misma lógica en diferentes partes de la aplicación.
  3. Facilita las Pruebas: Los servicios pueden ser fácilmente probados de manera aislada.

Creación de un Servicio

Para crear un servicio en Angular, se utiliza el comando ng generate service o su abreviatura ng g s. A continuación, se muestra cómo crear un servicio llamado data.

ng generate service data

Este comando generará dos archivos:

  • data.service.ts
  • data.service.spec.ts (archivo de pruebas)

Estructura de un Servicio

El archivo data.service.ts generado tendrá una estructura similar a la siguiente:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }

}

Explicación del Código

  • @Injectable: Este decorador marca la clase como un servicio que puede ser inyectado. El parámetro { providedIn: 'root' } indica que el servicio será proporcionado en el nivel raíz, lo que significa que estará disponible en toda la aplicación.
  • Constructor: El constructor se utiliza para inyectar dependencias en el servicio.

Uso de un Servicio en un Componente

Para utilizar un servicio en un componente, primero se debe inyectar en el constructor del componente. A continuación, se muestra un ejemplo de cómo inyectar y utilizar el DataService en un componente.

Paso 1: Inyectar el Servicio

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    // Uso del servicio
  }

}

Paso 2: Utilizar el Servicio

Supongamos que DataService tiene un método llamado getData que devuelve un array de datos. Podemos utilizar este método en el componente de la siguiente manera:

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  data: any[];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.data = this.dataService.getData();
  }

}

Ejemplo Completo del Servicio

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }

  getData(): any[] {
    return [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ];
  }
}

Ejercicio Práctico

Ejercicio 1: Crear y Utilizar un Servicio

  1. Crear un Servicio: Utiliza el comando ng generate service para crear un servicio llamado user.
  2. Agregar un Método: En el servicio UserService, agrega un método llamado getUsers que devuelva una lista de usuarios.
  3. Inyectar el Servicio: Inyecta UserService en un componente llamado UserComponent.
  4. Utilizar el Servicio: Utiliza el método getUsers en el componente UserComponent para obtener y mostrar la lista de usuarios.

Solución

Paso 1: Crear el Servicio

ng generate service user

Paso 2: Agregar un Método en UserService

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

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor() { }

  getUsers(): any[] {
    return [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
      { id: 3, name: 'Jim Brown' }
    ];
  }
}

Paso 3: Inyectar el Servicio en UserComponent

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  users: any[];

  constructor(private userService: UserService) { }

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

}

Paso 4: Mostrar la Lista de Usuarios en la Plantilla

<!-- user.component.html -->
<ul>
  <li *ngFor="let user of users">
    {{ user.name }}
  </li>
</ul>

Conclusión

En esta sección, hemos aprendido qué son los servicios en Angular, por qué son importantes y cómo crearlos y utilizarlos en nuestros componentes. Los servicios son una herramienta poderosa para mantener nuestro código modular, reutilizable y fácil de mantener. En la próxima sección, profundizaremos en la creación y uso de servicios, así como en la inyección de dependencias.

◄ Anterior
◄
Siguiente ►
►

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

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