Framework Angular

Servicios en Angular con ejemplo

Los servicios en Angular sirven para varias cosas y son muy parecidos a los servicios de AngularJS.

Un servicio es un servicio, ¿no? sirve para algo y de acuerdo a varios autores debería hacer solo una cosa y debería hacerla bien.

Los servicios sirven para varias cosas, al menos yo los he usado para:

  • Encerrar funciones útiles
  • Obtener cálculos con fórmulas definidas
  • Invocar a servidor HTTP para consumir API

Un servicio en Angular es un paradigma, una forma de pensar y una forma de organizar el código, nada más. Aunque físicamente es un service, pero bien podríamos evitarlos, solo que no se recomienda.

¿Por qué usar servicios?

Usando un servicio (service) en Angular usando TypeScript

Como lo dije, es una buena práctica y separamos nuestro código. Aunque al inicio parezca redundante, es mejor hacerlo así.

Crear un servicio

Podemos generar un servicio con la CLI de Angular usando:

ng g service nombreServicio

En mi caso tengo un servicio que va a gestionar mascotas así que:

ng g service mascotas

Eso va a crear dos archivos que igualmente podríamos crear de manera manual; el que importa (ya que el otro igual es importante pero es para las pruebas) es el que termina en .service.ts.

Un servicio es una simple clase que encierra funciones; y el nombre de la clase termina en Service por convención.

Ejemplo de servicios en Angular

Es momento de mostrar el ejemplo.

La parte más importante es la definición de la clase, el nombre del archivo y la anotación de @Injectable; de este modo permitimos que nuestro servicio sea inyectado en los componentes como veremos en la siguiente sección.

/*

    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
*/import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Mascota } from "./mascota"
@Injectable({
  providedIn: 'root'
})
export class MascotasService {
  baseUrl = "http://localhost/mascotas_angular"

  constructor(private http: HttpClient) { }

  getMascotas() {
    return this.http.get(`${this.baseUrl}/getAll.php`);
  }

  getMascota(id: string | number) {
    return this.http.get(`${this.baseUrl}/get.php?idMascota=${id}`);
  }

  addMascota(mascota: Mascota) {
    return this.http.post(`${this.baseUrl}/post.php`, mascota);
  }

  deleteMascota(mascota: Mascota) {
    return this.http.delete(`${this.baseUrl}/delete.php?idMascota=${mascota.id}`);
  }

  updateMascota(mascota: Mascota) {
    return this.http.put(`${this.baseUrl}/update.php`, mascota);
  }
}

No hagas caso a los imports ni al módulo http. Lo importante es que tengo una clase de TypeScript en donde defino funciones que serán usadas en distintos componentes dentro de la app de Angular.

De este modo puedo reutilizar funciones, ya que si en un componente quiero mostrar un formulario para editar una mascota (previamente rellenado) podré invocar a getMascota, y si en otro componente quiero mostrar los detalles de una mascota también puedo invocar a getMascota; es decir, reutilizo código.

Otra ventaja de los servicios es que son una única fuente de verdad y que si se necesita cambiar algo se cambia en un solo lugar. Al hacerlo, todos los componentes que lo invoquen tendrán la última versión.

Importar servicio

Para importar el servicio que acabamos de crear usamos import como si estuviéramos importando cualquier clase y después lo inyectamos en el constructor.

Import:

import { MascotasService } from "../mascotas.service"

Nota: aquí uso ../ porque la clase del servicio está un directorio arriba de mi componente.

Constructor con inyección de Servicio en Angular:

constructor(private mascotasService: MascotasService) { }

Y después se puede usar accediendo a this.mascotasService. Veamos mi componente completo:

import { Component, OnInit } from '@angular/core';
import { MascotasService } from "../mascotas.service"
@Component({
  selector: 'app-listar-mascotas',
  templateUrl: './listar-mascotas.component.html',
  styleUrls: ['./listar-mascotas.component.css']
})
export class ListarMascotasComponent implements OnInit {

  constructor(private mascotasService: MascotasService) { }

  ngOnInit() {
    // Aquí invocamos al servicio:
    this.mascotasService.getMascotas().subscribe(data => {
      console.log("Los datos: ", data);
    });
  }

}

De ese modo podemos importar varios servicios, inyectándolos en el constructor.

Conclusión y puntos finales sobre los servicios en Angular

  • Los servicios en Angular son simples clases. El nombre de la clase debería terminar en Service y el archivo en .service.ts
  • Hay que definir a los servicios como inyectables usando @Injectable y con providedIn root
  • Se puede crear el servicio de Angular usando la cli o creando simplemente las clases, aunque recomiendo usar la CLI
  • El servicio se inyecta automáticamente si lo indicamos en el constructor

Te invito a leer más sobre Angular aquí.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Servidor HTTP en Android con Flutter

El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…

4 días hace

Imprimir automáticamente todos los PDF de una carpeta

En este post te voy a enseñar a designar una carpeta para imprimir todos los…

5 días hace

Guía para imprimir en plugin versión 1 desde Android

En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…

1 semana hace

Añadir tasa de cambio en sistema de información

Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…

2 semanas hace

Comprobar validez de licencia de plugin ESC POS

Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…

2 semanas hace

Imprimir euro € en impresora térmica

Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…

4 semanas hace

Esta web usa cookies.