Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:25

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Curso de Angular: Componentes y Servicios

Clase 13 de 20

Clase 13 / 20

Comentarios (22)22 comentarios

Jimmy Buriticá Londoño

Hace 5 años

Diego Fernando Caviedes Camaho

Hace 4 años

Jimmy Buriticá Londoño

Hace 5 años

Sebastian Vizcarra

Hace 5 años

Ivan Molero Delgado

Hace 4 años

Antonio Luis Fernandez Dromundo

David Castro

Randy Guerra

Brandon Vidal

Bryan MIño

Nicolás Castro Barón

Rafael Rodríguez Flores

Hace 3 años

Gustavo Jiménez Liévano

Hace 5 años

Diego Jurado

Hace 3 años

Luis Alejandro Alvarez Cadavid

Hace 10 meses

Jorge Morales

Hace un año

Jorge Morales

Hace un año

José Luis Moreno Robles

Hace 5 años

Daniel Meza

Hace 5 años

Gerardo Ferreyra

Hace 3 años

Brandon Lee Aguero Fernandez

Adrian Robles

Diego Boyatjian

Jose Nuñez

Julian Franco

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.

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.

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.

** aquí les complemento con este curso de profe niclas ** https://platzi.com/clases/2027-angular-forms/32581-reactive-forms-con-formbuilder/ donde utiliza la clase FormBuilder para crear una única instancia por todos los controles del formulario

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

!Untitled

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

Gracias por el aporte Antonn!

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

dónde consigo un curso de 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

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.

Gran explicación. Gracias Nicolás

Lo hace muy bien!

Nicolas una pregunta, quiere decir que las propiedades que se crean o que tienen los servicios en Angular, se comparten también a los demás componentes que utilizan ese servicio.

Cuando se crea un servicio en Angular, la instancia no se crea de inmediato. La creación de la instancia ocurre cuando el servicio es solicitado por un componente o por otro servicio, gracias al motor de inyección de dependencias de Angular. Esto significa que el servicio se crea cuando se necesita, y se reutiliza la misma instancia si otros componentes lo requieren, aplicando el patrón singleton.

El patrón Singleton garantiza que una clase tenga una única instancia y proporciona un punto de acceso global a esa instancia. En el contexto de la inyección de dependencias en Angular, cuando inyectas un servicio, Angular crea una única instancia de ese servicio y la comparte entre todos los componentes que la requieren. Así, no se generan múltiples instancias del mismo servicio, lo que ahorra recursos y mantiene la coherencia del estado. Este enfoque se utiliza para mejorar la eficiencia y facilitar la gestión de dependencias en tu aplicación Angular.

Tengo una situación en la que la "circular dependency" es necesaria por los requerimientos de mi proyecto y no me quiero ir por el lado "facil" de hacer un nuevo componente dado que romperia un poco la filosofia de reutilizar el que ya tengo completo

Lo he resuelto injectando el componente a traves de un provider pero me gustaría saber ¿Cual es la mejor forma de resolver el problema de circular dependency?

Más que nada, la dependencia circular, se da cuando el servicio 1 lo inyectas al servicio 2, pero éste servicio 2 depende del servicio 1 para funcionar.

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.

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

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos