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:
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.
Como lo dije, es una buena práctica y separamos nuestro código. Aunque al inicio parezca redundante, es mejor hacerlo así.
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.
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 import
s 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.
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.
Service
y el archivo en .service.ts
@Injectable
y con providedIn
rootTe invito a leer más sobre Angular aquí.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.