Inyección de dependencia en AngularJS con Ejemplo

¿Qué es Dependency Injection en AngularJS?

Dependency Injection es un patrón de diseño de software que implementa la inversión de control para resolver dependencias.

Inversión de Control: Significa que los objetos no crean otros objetos en los que confían para hacer su trabajo. En su lugar, obtienen estos objetos de una fuente externa. Esto forma la base de la inyección de dependencia en la que si un objeto depende de otro; el objeto principal no asume la responsabilidad de crear el objeto dependiente y luego usa sus métodos. En su lugar, una fuente externa (que en AngularJS, es el marco AngularJS en sí) crea el objeto dependiente y lo da al objeto fuente para su uso posterior.

Así que primero comprendamos qué es una dependencia.

El diagrama anterior muestra un ejemplo simple de un ritual cotidiano en la programación de bases de datos.

  • El cuadro ‘Modelo’ representa la “Clase Modelo” que normalmente se crea para interactuar con la base de datos. Entonces, ahora la base de datos es una dependencia para que funcione la “clase Modelo”.
  • Por inyección de dependencia, creamos un servicio para tomar toda la información de la base de datos y entrar en la clase modelo.

En el resto de este tutorial, veremos más en la inyección de dependencia y cómo esto se logra en AngularJS.

En este tutorial, usted aprenderá –

Qué componente se puede inyectar como dependencia en AngularJS

En Angular.js, las dependencias se inyectan mediante el uso de un “método de fábrica inyectable” o “función constructor”.

Estos componentes se pueden inyectar con componentes de “servicio” y “valor” como dependencias. Hemos visto esto en un tema anterior con el servicio $http.

Ya hemos visto que el servicio $http se puede usar dentro de AngularJS para obtener datos de una base de datos MySQL o MS SQL Server a través de una aplicación web PHP.

El servicio $http se define normalmente desde dentro del controlador de la siguiente manera.

Ahora, cuando el servicio $http se define en el controlador como se muestra arriba. Significa que el controlador ahora tiene una dependencia del servicio $http.

Entonces, cuando se ejecuta el código anterior, AngularJS realizará los siguientes pasos;

  1. Compruebe si se ha instanciado el “servicio $http”. Dado que nuestro “controlador” ahora depende del “servicio $http”, un objeto de este servicio debe estar disponible para nuestro controlador.
  2. Si AngularJS descubre que el servicio $http no está instanciado, AngularJS utiliza la función ‘factory’ para construir un objeto $http.
  3. El inyector dentro de Angular.js proporciona una instancia del servicio $http a nuestro controlador para su posterior procesamiento.

Ahora que la dependencia se inyecta en nuestro controlador, ahora podemos invocar las funciones necesarias dentro del servicio $http para su posterior procesamiento.

Ejemplo de inyección de dependencia

La inyección de dependencia se puede implementar de 2 maneras

  1. Uno es a través del “Componente de valor”
  2. Otro es a través de un “Servicio”

Veamos la implementación de ambas formas con más detalle.

1) Componente de valor

Este concepto se basa en el hecho de crear un objeto JavaScript simple y pasarlo al controlador para su posterior procesamiento.

Esto se implementa usando los dos pasos siguientes

Paso 1) Crear un objeto JavaScript utilizando el componente de valor y adjuntarlo a su módulo principal AngularJS.js.

El componente de valor toma dos parámetros; uno es la clave, y el otro es el valor del objeto javascript que se crea.

Paso 2) Acceder al objeto JavaScript desde el controlador Angular.js

En el ejemplo de código anterior, los siguientes pasos principales se están llevando a cabo

La función de valor del módulo Angular.js JS se está utilizando para crear un par clave-valor llamado “TutoriaID” y el valor de “5”.

La variable tutoriaID ahora se vuelve accesible para el controlador como parámetro de función.

El valor de tutorialID que es 5, ahora se está asignando a otra variable llamada ID en el objeto $scope. Esto se está haciendo para que el valor de 5 se pueda pasar del controlador a la vista.

El parámetro ID se muestra en la vista como una expresión. Por lo tanto, la salida de ‘5’ se mostrará en la página.

Cuando se ejecuta el código anterior, la salida se mostrará como a continuación

2) Servicio

El servicio se define como un objeto JavaScript singleton que consiste en un conjunto de funciones que desea exponer e inyectar en su controlador.

Por ejemplo, el “$http” es un servicio en Angular.js que cuando se inyecta en sus controladores proporciona las funciones necesarias de

(get (), query (), save (), remove (), delete ()).

Estas funciones se pueden invocar desde su controlador en consecuencia.

Veamos un ejemplo simple de cómo puede crear su propio servicio. Vamos a crear un servicio de adición simple que añade dos números.

En el ejemplo anterior, se llevan a cabo los siguientes pasos

Aquí estamos creando un nuevo servicio llamado ‘AdditionService’ usando el parámetro de servicio de nuestro módulo principal AngularJS JS.

Aquí estamos creando una nueva función llamada Adición dentro de nuestro servicio. Esto significa que cuando AngularJS crea una instancia de nuestro AdditionService dentro de nuestro controlador, podríamos acceder a la función ‘Addition’. En esta definición de función, estamos diciendo que esta función acepta dos parámetros, a y b.

Aquí estamos definiendo el cuerpo de nuestra función de adición que simplemente agrega los parámetros y devuelve el valor añadido.

Este es el paso principal que implica la inyección de dependencia. En nuestra definición de controlador, ahora estamos haciendo referencia a nuestro servicio ‘AdditionService’. Cuando AngularJS vea esto, creará una instancia de un objeto de tipo ‘AdditionService.’

Ahora estamos accediendo a la función ‘Addition’ que se define en nuestro servicio y asignándola al objeto $scope del controlador.

Así que este es un ejemplo simple de cómo podemos definir nuestro servicio e inyectar la funcionalidad de ese servicio dentro de nuestro controlador.

Resumen:

  • Inyección de dependencia como su nombre lo indica es el proceso de inyectar funcionalidad dependiente en módulos en tiempo de ejecución.
  • El uso de la inyección de dependencia ayuda a tener un código más reutilizable. Si tenía una funcionalidad común que se usa en varios módulos de aplicaciones, la mejor manera es definir un servicio central con esa funcionalidad y luego inyectar ese servicio como una dependencia en los módulos de la aplicación.
  • El objeto de valor de AngularJS se puede usar para inyectar objetos JavaScript simples en su controlador.
  • El módulo de servicio se puede usar para definir sus servicios personalizados que se pueden reutilizar a través de múltiples módulos AngularJS.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *