Componentes
Todo lo que aprenderás sobre componentes y servicios en Angular
¿Qué son los componentes?
Uso de Inputs
Uso de Outputs
Componente para producto
Ciclo de vida de componentes
ngDestroy and SetInput
Lista de productos
Componentes y Header
Implementando el sideMenu
Comunicación padre e hijo
Servicios
Conociendo los servicios
¿Qué es la inyección de dependencias?
Obteniendo datos de una API
Pipes y Directives
Conociendo los pipes
Construyendo tu propio pipe
Conociendo las directivas
Best practices
Reactividad básica
Guia de estilos de Angular y linters
Despedida
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
Angular usa varios patrones de diseño para permitir que esto funcione.
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.
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.
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.
Aportes 18
Preguntas 1
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 (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.
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.
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:
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
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?