Aprenderemos qué es un servicio de Angular y luego crearemos un ejemplo con la última versión de Angular 9.

Un servicio de Angular es un singleton que puede conectarse con componentes u otros servicios a través de la Inyección de Dependencias.

> ✋✋ Únete a nuestro grupo de Facebook 👈 para discutir cualquier cosa relacionada con el desarrollo de Angular.

Según la Wikipedia:

En ingeniería de software, la inyección de dependencias es una técnica por la que un objeto suministra las dependencias de otro objeto.

No te dejes intimidar por este término, simplemente significa que Angular (o una parte de Angular, el inyector) se encarga de instanciar los servicios y proporciona la instancia al componente solicitante.

>✋✋ También revisa Servicios de Angular 9/8 & Inyección de Dependencias vía providedIn, root & cualquier Tutorial 👈

Según los docs de Angular:

DI está cableado en el framework de Angular y se utiliza en todas partes para proporcionar a los nuevos componentes los servicios u otras cosas que necesitan. Los componentes consumen servicios; es decir, puedes inyectar un servicio en un componente, dándole al componente acceso a esa clase de servicio.

Puedes usar servicios para organizar y compartir código a través de tu app

¿Cómo definir un servicio de Angular?

Para definir una clase como un servicio en Angular, utiliza el decorador @Injectable() para proporcionar los metadatos que permiten a Angular inyectarlo en un componente como una dependencia.

Tienes que proporcionar un servicio antes de que pueda estar disponible. Esto puede hacerse de tres maneras:

• A través de los metadatos del servicio pasados al decorador @Injectable() (El servicio estará disponible en todas partes),
• A través del array de proveedores, en un módulo específico (El servicio está disponible sólo para los componentes y servicios del módulo),
• A través del array de proveedores en un componente específico (El servicio está disponible sólo para el componente).

Servicio de Angular 9 por ejemplo

Ahora vamos a crear un servicio por ejemplo.

Asegúrate de que tienes un proyecto de Angular creado y Angular CLI v9 instalado.

Dirígete a tu interfaz de línea de comandos y navega a la carpeta de tu proyecto:

$ cd your-angular-project

A continuación, genera un nuevo servicio ejecutando el siguiente comando:

$ ng generate service my-example

Abre el archivo src/app/mi-ejemplo.service.ts:

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

Gracias a la propiedad providedIn, no es necesario hacer nada más para empezar a utilizar este servicio, excepto implementar la funcionalidad que debe proporcionar. el valor root se refiere al módulo raíz de la app.

También puedes inyectar otros servicios en tu nuevo servicio -por ejemplo, el servicio HttpClient incorporado- a través de su constructor:

import { HttpClient } from '@angular/common/http';@Injectable({
providedIn: 'root'
})
export class MyExampleService { constructor(private httpClient: HttpClient) { }
}

Después de implementar los métodos de tu servicio, puedes importarlo e inyectarlo en otros componentes y llamar a los métodos públicos de tu servicio en tu componente.

Según la documentación de Angular:

Típicamente, el trabajo de un componente es permitir la experiencia del usuario y nada más. Un componente debe presentar propiedades y métodos para la vinculación de datos, con el fin de mediar entre la vista (renderizada por la plantilla) y la lógica de la aplicación.

Un componente puede delegar ciertas tareas a los servicios, tales como la obtención de datos del servidor, la validación de la entrada del usuario, o el registro directamente a la consola.

Al definir tales tareas de procesamiento en una clase de servicio inyectable, haces que esas tareas estén disponibles para cualquier componente.