No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Qué es la inyección de dependencias?

13/20
Recursos

Es muy sencillo crear un servicio en Angular, inyectarlo en un componente y utilizar su lógica. Pero siempre es recomendable entender **¿qué es la inyección de dependencias?, cómo se está haciendo y qué sucede detrás en tu aplicación.

Patrones de diseño

Angular usa varios patrones de diseño para permitir que esto funcione.

Inyección de dependencias

Imagínate que tienes el siguiente panorama:
Un Servicio A que emplea el Servicio B y este a su vez utiliza el Servicio C.

Si tuvieses que instanciar el Servicio A, primero deberías:
instanciar el C para poder continuar con el B y luego sí hacerlo con el A. Se vuelve confuso y poco escalable si en algún momento también tienes que instanciar el Servicio D o E.

La inyección de dependencias soluciona las dependencias de una clase por nosotros.

Cuando instanciamos en el constructor el servicio A, Angular por detrás genera automáticamente la instancia del servicio B y C sin que nosotros nos tengamos que preocupar por estos.

Cuando creaste tu primer servicio con el CLI de Angular:

// services/test-name.service.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class TestNameService {
  constructor() { }
}

Este le proporcionó a la clase el decorador @Injectable({ ... }) con el valor providedIn: 'root' que determina el scope del servicio, o sea, determina que el mismo estará disponible en toda el módulo de tu aplicación por default.

Singleton

La inyección de dependencias no es el único patrón de diseño que Angular usa con sus servicios. También hace uso del patrón Singleton para crear una instancia única de cada servicio.

Si tienes un servicio que se utiliza en N cantidad de componentes (u otros servicios), todos estarán utilizando la misma instancia del servicio y compartiendo el valor de sus variables y todo su estado.

Precauciones utilizando servicios

Ya has visto hasta aquí que un servicio puede ser importado en muchos componentes u otros servicios a la vez. Puedes inyectar la cantidad de servicio que quieras en un componente, siempre de una forma controlada y coherente.

inyección de dependencias.png

Solo debes tener cuidado con las dependencias circulares. Cuando un servicio importa a otro y este al anterior. Angular no sabrá si vino primero el huevo o la gallina y tendrás un error al momento de compilar tu aplicación.


Contribución creada con los aportes de Kevin Fiorentino.

Aportes 18

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Singleton

En ingeniería de software, singleton o instancia única es un patrón de diseño que permite restringir la creación de objetos pertenecientes a una clase o el valor de un tipo a un único objeto. Su intención consiste en garantizar que una clase solo tenga una instancia y proporcionar un punto de acceso global a ella.
Wikipedia.

Inyección de Dependencias

Inyección de Dependencias (Dependency Injection o DI) es un patrón de diseño en el que una clase requiere instancias de una o más clases y en vez de generarlas dentro de su propio constructor, las recibe ya instanciadas por un mecanismo externo.

Conociendo los servicios

Es la forma en la que Angular hace modular nuestra aplicación y apartar nuestra lógica de negocio.

Los services tienne decodadores y le dicen a angular como debe de coportarse esa clase y hace que se pueda inyectar en otros componentes y servicios.


¿Qué es la inyección de dependencias?

En la clase pasada creamos un servicio gracias al generador de servicios de angular: ng generate s components/StoreService

Angular marca on un decorador a los servicios, en este caso sería inyectable. Para que se puedan inyectar en diferentes archivos

Tambien tiene un ambiente o dominio o un alcancé como scope, en este caso es providenIn: ‘’root’, significa que en el modulo que estemos trabajando sin necesidad de estar directamente en el modulo.

Los servicios pueden ser inyectados en componentes.

La sintaxis es ir a nuestro componente y es importar nuestro servicio y desde el constructor le damos un modo de acceso. Ya sea privado o publico. Esto depende de como lo queramos manejar en nuestro componente. Le ponemos un tipado en este caso “storeService”;

Yo puedo tener varios servicios y como cualquier aplicación podemos tener varios componentes. En este ejemplo tengo dos servicios y tres componentes. El componente A y B están requiriendo del servicio A, mientras que el componente C y B del servicio B. A su vez los componentes pueden inyectas varios servicios a la vez (como en este caso, el componente B).

Cada componente crea una instancia del servicio.

El patrón Singleton se refiere a que si se crea una instancia de algún elemento o instancia en particular y otro componente lo requiere no crea otra instancia sino que guarda la necesaria y devuelve esa referencia a los demás componentes que lo necesiten.

Otro caso que se puede dar en que un servicio puede inyectar a otro. En este escenario el servicio A necesita del servicio B. Los componentes pueden inyectar servicios y los servicios pueden inyectar servicios.

Donde si hay que tener precaución es no tener una doble inyección

Si ambos servicios depende de ellos nos dará un error ya que se bloquean y nos daría un error de referencia circular en Angular

Uno de los usos que suelo darle a instancias singleton es el de acceso a recursos externos, como las conexiones a bases de datos o acceso a APIs, ya que regar por todo el código el acceso sólo complica el código, tenerlo en un sólo sitio evitando crear múltiples conexiones me parece lo más adecuado.

Para mas detalles, puedes revisar la documentacion oficial de Angular:

https://docs.angular.lat/tutorial/toh-pt4

Me gusto,mucho esta clase destaca funcionalidad con respecto al core de Angular.

Patrones de diseño

Un poco más de información enfocado a Angular de la Inyección de dependencias y del patrón Singleton

Gran explicación. Gracias Nicolás

**Solución a la dependencia circular en Angular** * **Extraer la funcionalidad común en un nuevo servicio**: Si dos servicios dependen entre sí porque comparten funcionalidad similar, puedes extraer esa funcionalidad común en un nuevo servicio y hacer que ambos servicios dependan de este nuevo servicio. De esta manera, se elimina la dependencia circular directa. * **Utilizar eventos o observables**: En lugar de que los servicios dependan directamente entre sí, puedes utilizar eventos o observables para comunicar cambios o intercambiar información entre ellos. Esto permite una comunicación indirecta y evita la dependencia circular directa. * **Reevaluar la arquitectura de tu app**: Si la dependencia circular persiste y no se puede resolver mediante los métodos anteriores, es posible que debas reevaluar la arquitectura de tu aplicación y considerar si hay una mejor manera de organizar tus servicios y componentes.
Estas clases pueden ser aburridas pero creo que son tremendamente importantes. Debería haber más píldoras de este tipo a lo largo de los cursos, facilitan entender lo que se hace en el código.

Muy interesante👀, ahora me ocurre algo, digamos que tenemos una cuenta regresiva gracias a la inyección de dependencias y el patrón de diseño singleton, compartir ese misma cuenta regresiva entre diferentes rutas de nuestra pagina web

les dejo este enlace, donde por defecto se explica que la inyección de dependencias en angular se hace de modo singleton, pero los componentes pueden tener una inyección de dependencias que puede ser una instancia individual del propio componente, inyectando el servicio desde el decorador @component

La Inyeccion de dependencias (IoD) en Angular es muy parecido a como funciona en Spring (java). Se le delega al framework la creacion de la class (inversion of control), y en ambos se crea esa instancia como un Singleton.

EL patrón Singleton se refiere a la creación de una sola instancia de una clase, mientras que Dependency Injection se refiere a la forma en que las dependencias de una clase son administradas y pasadas. Aunque pueden parecer similares y ser utilizados juntos en algunos casos, son conceptos separados con objetivos distintos.

Seria bueno poder ver un ejemplo aplicado a este concepto pero este curso se ha quedado corto comprado a los de React que son teoricos y practicos a la vez

demo

Super esta clase de inyección de dependencias