¿Qué es la inyección de dependencia en AngularJS?
La inyección de dependencia 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 se basan para hacer su trabajo. En cambio, obtienen estos objetos de una fuente externa. Esto forma la base de la inyección de dependencia en la que si un objeto es dependiente de otro; el objeto primario no asume la responsabilidad de crear el objeto dependiente y luego usa sus métodos. En cambio, una fuente externa (que en AngularJS, es el marco de AngularJS en sí) crea el objeto dependiente y se lo da al objeto de origen para su uso posterior.
Entonces, primero entendamos qué es una dependencia.
El diagrama anterior muestra un ejemplo simple de un ritual diario en la programación de bases de datos.
- El cuadro 'Modelo' muestra la "Clase de modelo" que normalmente se crea para interactuar con la base de datos. Así que ahora la base de datos es una dependencia para que funcione la "clase de 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 del modelo.
En el resto de este tutorial, veremos más en la inyección de dependencias y cómo se logra esto en AngularJS.
En este tutorial, aprenderá:
- ¿Qué componente se puede inyectar como dependencia en AngularJS?
- Ejemplo de inyección de dependencia
- Componente de valor
- Servicio
¿Qué componente se puede inyectar como dependencia en AngularJS?
En Angular.JS, las dependencias se inyectan mediante un "método de fábrica inyectable" o una "función de 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 normalmente se define desde el controlador de la siguiente manera.
sampleApp.controller ('AngularJSController', function ($scope, $http)
Ahora, cuando el servicio $ http se define en el controlador como se muestra arriba. Significa que el controlador ahora depende del servicio $ http.
Entonces, cuando se ejecute el código anterior, AngularJS realizará los siguientes pasos;
- Compruebe si se ha creado una instancia del "$ http service". Dado que nuestro "controlador" ahora depende del "servicio $ http", un objeto de este servicio debe estar disponible para nuestro controlador.
- Si AngularJS descubre que el servicio $ http no está instanciado, AngularJS usa la función 'factory' para construir un objeto $ http.
- El inyector dentro de Angular.JS luego 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 formas
- Uno es a través del "Componente de valor"
- 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 mediante los dos pasos siguientes
Paso 1) Cree un objeto JavaScript utilizando el componente de valor y adjúntelo 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) Acceda al objeto JavaScript desde el controlador Angular.JS
Event Registration Guru99 Global Event
{{ID}}
En el ejemplo de código anterior, se llevan a cabo los pasos principales a continuación
-
sampleApp.value ("TutorialID", 5);
La función de valor del módulo Angular.JS JS se está utilizando para crear un par clave-valor llamado "TutorialID" y el valor de "5".
-
sampleApp.controller('AngularJSController', function ($scope,TutorialID)
La variable TutorialID ahora se vuelve accesible para el controlador como un parámetro de función.
-
$scope.ID =TutorialID;
El valor de TutorialID, que es 5, ahora se asigna a otra variable llamada ID en el objeto $ scope. Esto se hace para que el valor de 5 se pueda pasar del controlador a la vista.
-
{{IDENTIFICACIÓN}}
El parámetro de ID se muestra en la vista como una expresión. Entonces, la salida de '5' se mostrará en la página.
Cuando se ejecuta el código anterior, la salida se mostrará como se muestra a continuación
2) Servicio
El servicio se define como un objeto JavaScript único que consta de un conjunto de funciones que desea exponer e inyectar en su controlador.
Por ejemplo, "$ http" es un servicio en Angular.JS que cuando se inyecta en sus controladores proporciona las funciones necesarias de
(obtener (), consultar (), guardar (), eliminar (), eliminar ()).
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 suma simple que suma dos números.
Event Registration Guru99 Global Event
Result: {{result}}
En el ejemplo anterior, se llevan a cabo los siguientes pasos
-
mainApp.service('AdditionService', function()
Aquí estamos creando un nuevo servicio llamado 'AdditionService' usando el parámetro de servicio de nuestro módulo principal AngularJS JS.
-
this.Addition = function(a,b)
Aquí estamos creando una nueva función llamada Adición dentro de nuestro servicio. Esto significa que cuando AngularJS instancia nuestro AdditionService dentro de nuestro controlador, entonces 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, ay b.
-
return a+b;
Aquí estamos definiendo el cuerpo de nuestra función Adición que simplemente agrega los parámetros y devuelve el valor agregado.
-
mainApp.controller('DemoController', function($scope, AdditionService)
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'.
-
$scope.result = AdditionService.Addition(5,6);
Ahora estamos accediendo a la función 'Adición' que está definida en nuestro servicio y asignándola al objeto $ scope del controlador.
Entonces, este es un ejemplo simple de cómo podemos definir nuestro servicio e inyectar la funcionalidad de ese servicio dentro de nuestro controlador.
Resumen:
- La 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 aplicación, la mejor manera es definir un servicio central con esa funcionalidad y luego inyectar ese servicio como una dependencia en los módulos de su 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 utilizar para definir sus servicios personalizados que se pueden reutilizar en varios módulos de AngularJS.
