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

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

6 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

6 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

6 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

6 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

6 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

7 días hace

Esta web usa cookies.