Cómo inyectar servicios mediante a la Inyección de dependencias de Angular

En el artículo de introducción a los servicios, ya empecemos a ver que cuando creamos un desarrollo de una web, las clases, suelen requerir de otras clases.

Analizando a detalle Tight Coupling vs Dependency Injection

¿Cómo podemos trabajar desde una clase con los objetos de otras clases? Y vimos la primera manera la tradicional de la programación, utilicemos el conocido como Tight Coupling.

Tight Coupling consiste en realizar instanciaciones de las clases  que vamos a utilizar con el fin de instancia/crear (mediante a sus constructores) objetos de dichas clases dentro del constructor de la clase en cuestión sobre la que queremos utilizar dichos objetos.

Es decir creabamos objetos de las clases que vamos a utilizar dentro de la clase que los quiere utilizar.

Un ejemplo de Tight Coupling, podría ser:

Vemos que tenemos una clase A (AppComponent) instancia es decir crea un objeto serviceB y serviceC del molde de dichas clases BServive y CService. Y por tanto, aunque nuestra aplicación funciona, nuestra clase tiene una dependencia de dichas clases B y C y por tanto, no va a actuar de forma independiente a dichos servicios.

En la actualidad es una aplicación muy muy pequeña, y por tanto, modificar una clase no nos supone un gran esfuerzo. Pero como ya hablemos sobre dicha técnica, cuando nuestra aplicación empieza a escalar y va aumentado su tamaño y las clases de los servicios BService y CService empiezan a ser utilizada cada vez en más sitios. Nos encontramos con el problema que cualquier modificación puede provocarnos tener que modificar 70 u 80 clases por cada una de las clases que modifiquemos.

Esto, multiplicado por una gran cantidad de modificaciones y acompañado de no solo 3 clases sino de muchas, nos generará lo que se conoce como un árbol o relación de dependencias que cada vez será más y más complejo.

Hasta llegar al punto que por ejemplo, la clase A depende de la clase C, que a su vez depende la clase H, que a su vez depende de la clase K.

En muchas ocasiones queremos realizar una nueva implementación (Poner en funcionamiento o llevar a cabo una cosa determinada como un testeo que podamos revertir por ejemplo) basada sobre nuestra actual clase C. Pero queremos mantener la actual clase C, tal cual, es decir no la queremos perder.

Ante el hipotético caso de que tengamos el problema resuelto con Tight Coupling, es decir, llamando en el constructor de todas las clases que dependen del  servicio de la clase C tendremos que modificar una a una todas las instanciaciones del constructor de dicha clase (70-80, etc.) hacía el de la nueva clase C mejorada.

Además si queremos trabajar con la clase C, necesitaremos previamente antes de poder instanciar dicha clase crear todas las clases que necesita de dicha clase para poder funcionar.

Todos estos problemas, son los que nos va a ayudar a resolver la inyección de dependencias.

  • Substituir un objeto por otro de una forma sencilla siempre y que ambos contengan la misma interfaz.
  • Instanciación inmediata de objetos que dependen/requieren de otros objetos sea inmediata, sin tener que instanciar previamente a todos los objetos dependientes.

¿Qué es la inyección de dependencias?

La inyección de dependencias o dependency injection, es un patrón que consiste en inyectar los objetos (es decir, las instancias de nuestras clases de las que dependemos) en nuestras clases a través de los parámetros del constructor de nuestro componente.

Angular proporciona mecanismos para que la inyección de dependencias sea sencilla y se orienta en los objetos.

Entonces ¿Cómo solucionamos dicho problema mediante a la inyección de dependencias?

Creando los objetos dependientes desde la zona de parámetros del constructor de la clase y no desde la clase o desde el interior del propio constructor.

El principal beneficio de utilizar la inyección de dependencias es que para trabajar con la clase C no necesitamos saber que necesitamos la clase J, K, I, H y G. Ni tener que crear G e H, para poder trabajar con I y posteriormente crear H para poder trabajar con G y finalmente poder crear nuestra clase C.

Ya que este patrón (el dependency injection) nos va a permitir realizar la instanciación de cualquier objeto cuando el programador lo solicite sin tener la necesidad de que el programador sepa cada una de las clases sobre las que necesitamos crear objetos y que nuestro objeto solicitado requiere para ser creado.

Este proceso de crear un objeto sin tener que preocuparnos de conocer todas y cada una de las dependencias de objetos que nuestra clase va a tener suele recibir el nombre de contenedor de servicios (o inyector)

El contenedor de servicios (o inyector) es capaz de crear objetos que dependen de otros. Sin necesidad alguna de saber cómo se crean dichos objetos.

Maneras de inyectar un servicio/clase/componente

Existen distintas alternativas sobre cómo podemos registrar un servicio para poder posteriormente inyectar dicho servicio en el constructor de un componente con el fin de poder consumirlo desde el constructor de la clase que anteriormente era dependiente de dicho servicio de Angular.

Dichas alternativas se conocen como provider scope y son:

  • Inyectar en los servicios @Injectable: (disponible a partir de la versión 6 de Angular) será visible desde todos los componentes de nuestra aplicación.
  • Hacer uso de providers a nivel del modulo: el servicio será visible exclusivamente dentro de las clases (componentes, pipes, etc) de nuestro modulo.
  • Hacer uso de providers a nivel del componente: únicamente será visible para  dicho componente de nuestra aplicación.

Inyectar en los servicios @Injectable

Para inyectar un servicio, escribimos el acceso a la clase en nuestro caso, solo será visible a nivel de la clase actual ya que usamos private, junto al nombre con el que trabajaremos en dicho constructor acompañado de dos puntos : y la clase que instanciaremos para crear el objeto.

De hecho este caso en particular nos funciona debido a que el elemento que nos va a permitir en este caso de inyectar dicho servicios en el constructor de nuestro componente app.component.ts es el decorador @Injectable({ provideIn: ‘root’ });

Muestra de ello, es que si eliminamos dicho decorador del nuestros servicios:

Y volvemos a la página de nuestra aplicación, nos mostrará un error tal que así:

Corregir esto tiene varias soluciones, vamos a verlo.

Hacer uso de providers a nivel del modulo

Otra opción para trabajar con dichos servicios es el uso de providers dentro del módulo en el que hacemos uso de dichos servicios.

En dicho array de providers añadiremos el nombre de las clases que contienen dichos servicios y lo cual nos permitirá añadir los servicios para poder inyectarlos en nuestro constructor del componente para poder trabajar con ellos.

Hacer uso de providers a nivel del componente

O como alternativa realizar lo mismo que hemos realizado anteriormente en el providers del módulo a nivel de

Ejemplo de servicio de logger sobre componentes

Vamos a hacer una aplicación que nos permite seleccionar una bebida y una comida como si de un restaurante se tratará y queremos que cada vez que el usuario selecciona un producto, genere un log. En dicho log, mostraremos el valor junto a la fecha y la hora.

Para ello, partimos de una estructura inicial de un proyecto de Angular por lo que no tendremos servicios ni componentes adicionales a los que trae la estructura de angular por defecto.

Primeramente, vamos a modularizar nuestra aplicación generando dos módulos:

Dentro de cada uno de los módulos, vamos a generar un componente y se lo vamos a signar al módulo que corresponda mediante a –module=nombreDelModulo. Vamos a verlo:

Para acceder a los componentes de nuestros nuevos dos módulos que acabamos de crear dentro de nuestra aplicación sean visibles dentro de nuestra aplicación, tenemos que exportarlos:

Una vez realizado esto os aconsejo reiniciar el proyecto nuevamente ya que nuestro proyecto tiene que importar unos componentes nuevos. Y aquí podemos ver el resultado:

Bien, una vez hemos creado y comunicado a los diferentes módulos de nuestra aplicación, vamos a crear nuestro servicio de logger:

Como vamos a utilizar [(ngModel)] dentro de nuestro template de HTML añadimos FormsModule al modulo bebida.module.ts:

Una vez creados los componentes y el servicio a injectar, vamos crear la selección de la bebida dentro del HTML de dicho componente:

Y repetimos la operación con el de la comida:

Vamos al servicio de logger y:

Y modificamos nuestros templates y en ambos reutilizamos el servicio:

Si ahora vamos a nuestra aplicación, podemos ver que hemos creado un servicio de log que muestra de un color los mensajes de comida y con otro los de comida:


Espero que os haya gustado. Un saludo!

24 comentarios

  1. Hi there! This post couldn’t be written any better!
    Reading through this post reminds me of my previous roommate!
    He constantly kept preaching about this. I will send this information to him.
    Pretty sure he’s going to have a great read. Thank you for
    sharing!

  2. Thankfulness to my father who stated to me regarding this web site, this webpage is
    actually awesome.

  3. Hello it’s me, I am also visiting this web page on a regular basis, this
    site is in fact pleasant and the viewers are actually sharing nice
    thoughts.

  4. Thanks for sharing your thoughts on website.
    Regards

  5. I have read so many posts about the blogger lovers except this article is really a nice post, keep
    it up.

  6. I am not sure where you’re getting your info, but good topic.
    I needs to spend some time learning more or understanding more.
    Thanks for magnificent info I was looking for this info for my mission.

  7. I just wanted to thank you one more time for this amazing web site you have produced
    here. It’s full of useful tips for those
    who are really interested in this specific subject, especially this very post.
    You’re really all so sweet plus thoughtful of others in addition to the fact that reading your site
    posts is a wonderful delight in my experience. And that of
    a generous present! Ben and I are going to have excitement making use of
    your points in what we have to do next week. Our checklist is a distance long so your tips might be put
    to great use.

    Also visit my web page :: Infinuity CBD Gummies

  8. bookmarked!!, I like your blog!

    My blog post – Biodermeux

  9. Have you ever considered creating an ebook or guest authoring on other blogs?
    I have a blog based upon on the same ideas you discuss and would really like
    to have you share some stories/information. I know my readers would appreciate your work.
    If you’re even remotely interested, feel free to shoot me an e-mail.

    Also visit my website Optimum Keto Reviews

  10. I view something truly special in this internet site.

    My web blog Luiresse Cream

  11. Very nice info and right to the point. I don’t know if this is
    truly the best place to ask but do you guys have any ideea
    where to get some professional writers? Thank you 🙂

    Also visit my web site :: Niva CBD Gummies

  12. It’s actually a nice and helpful piece of information. I am glad that you
    shared this helpful info with us. Please stay us up to date
    like this. Thank you for sharing.

  13. If you are going for best contents like me, only pay a quick visit this web page everyday because it offers feature contents, thanks

    Also visit my homepage Moscatcher

  14. I am really pleased to glance at this blog posts which
    includes lots of valuable facts, thanks for providing these data.

    Here is my homepage – Moscatcher Reviews

  15. We wish to thank you again for the stunning ideas you gave Jeremy when preparing a post-graduate research plus, most
    importantly, for providing every one of the ideas in one
    blog post. Provided that we had been aware of your blog a year ago, i’d have been kept from the pointless
    measures we were choosing. Thank you very much.

    Also visit my site; Vigor Max Male Enhancement Review

  16. Hey just wanted to give you a quick heads up. The text
    in your article seem to be running off the screen in Opera.
    I’m not sure if this is a formatting issue or something to do
    with web browser compatibility but I thought I’d post to let you know.
    The design and style look great though! Hope you get the issue solved soon. Cheers

  17. Good info. Lucky me I came across your website by accident (stumbleupon).
    I have bookmarked it for later!

  18. You could definitely see your skills within the article you write.
    The Skin Company Cream arena hopes for more passionate writers like you who aren’t afraid to say how they believe.

    Always follow your heart.

  19. First of all I would like to say fantastic blog! I had a quick question that I’d
    like to ask if you don’t mind. I was curious to find out how you center yourself
    and clear your head prior to writing. I have had trouble clearing my thoughts in getting
    my thoughts out. I do enjoy writing however it just seems like the
    first 10 to 15 minutes are wasted simply just trying to figure out how to begin.
    Any suggestions or hints? Thanks!

  20. If you are going for finest contents like me, only go to see this web page all the time
    because it offers quality contents, thanks

    My webpage – Clean Cut Keto Ingredients

  21. This is my first time go to see at here and i am truly pleassant to read all at alone place.

  22. Terrific post however I was wondering if you could write a litte more on this topic?
    I’d be very thankful if you could elaborate a little bit more.

    Many thanks!

  23. Pretty! This was an incredibly wonderful article.
    Many thanks for providing this info. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  24. Good article. I’m going through many of these issues as well..
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar