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?

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í.