Creación de una instancia de un servicio en Angular con @Injectable

Angular es un potente marco de trabajo de JavaScript diseñado para construir aplicaciones web de una sola página. Dentro de la arquitectura de Angular, los servicios son uno de los principales bloques de construcción. Los servicios en Angular son, en esencia, clases que proporcionan alguna funcionalidad específica y son administrados por el sistema de inyección de dependencias de Angular.

Los servicios se utilizan comúnmente para compartir datos y funcionalidades entre diferentes componentes en una aplicación Angular. El sistema de inyección de dependencias de Angular, es responsable de la creación de instancias de servicios y su suministro a los componentes que los requieren.

El decorador @Injectable() es esencial para la inyección de dependencias en Angular. Se utiliza para marcar una clase como elegible para la inyección de dependencias. Este decorador viene del módulo core de Angular.

Veamos un ejemplo práctico.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MiServicio {
// Código del servicio
}

En este ejemplo, se está creando un servicio llamado MiServicio. El decorador @Injectable se está utilizando con el objeto { providedIn: 'root' }. Esto significa que Angular creará una única instancia de MiServicio y la proporcionará en toda la aplicación (en la raíz).

Los otros decoradores presentes en las opciones de respuesta, como @Component, @NgModule y @Directive, son importantes en la creación de componentes, módulos y directivas respectivamente, pero no se utilizan para crear una nueva instancia de un servicio. Es por eso que la respuesta correcta es @Injectable({ providedIn: 'root' }).

Es importante resaltar que, aunque @Injectable({ providedIn: 'root' }) crea una instancia de un servicio a nivel de la aplicación, también se puede configurar para proporcionar el servicio a nivel de un módulo específico o componente, cambiando el valor de providedIn.

Por último, es una buena práctica seguir el principio de responsabilidad única al diseñar tus servicios en Angular. Cada servicio debe centrarse en una funcionalidad específica. Esto facilita el mantenimiento y mejora la legibilidad del código.