Componentes de inyección de dependencias de AngularJS

¿Qué es la inyección de dependencia en AngularJS?

Inyección de dependencia en AngularJS es un patrón de diseño de software que implementa la inversión de control para resolver dependencias. Decide cómo los componentes mantienen sus dependencias. Se puede utilizar mientras se definen los componentes o se proporcionan bloques de ejecución y configuración del módulo. Le permite hacer que los componentes sean reutilizables, comprobables y mantenibles.

Inversión de control: Significa que los objetos no crean otros objetos de los que dependen para realizar su trabajo. En cambio, obtienen estos objetos de una fuente externa. Esto forma la base de la inyección de dependencia de AngularJS en la que si un objeto depende de otro; el objeto primario no asume la responsabilidad de crear el objeto dependiente y luego usar sus métodos. En cambio, una fuente externa (que en AngularJS es el propio marco de AngularJS) crea el objeto dependiente y se lo entrega al objeto fuente para su uso posterior.

⚠️ Nota de versión: El soporte para AngularJS finalizó en enero de 2022., sin parches de seguridad. Angular moderno inyecta a través de proveedores @Injectable y inyectar()El código que aparece a continuación se mantiene como histórico.

Entonces, primero comprendamos qué es una dependencia.

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

• El cuadro "Modelo" representa la "clase de modelo" que normalmente se crea para interactuar con la base de datos. Por lo tanto, ahora la base de datos es una dependencia para que la "clase de modelo" funcione.
• Mediante inyección de dependencia, creamos un servicio para capturar toda la información de la base de datos e ingresar a la clase del modelo.

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

¿Qué componente se puede inyectar como dependencia en AngularJS?

En AngularJS, las dependencias se inyectan mediante un "método de fábrica inyectable" o una "función constructora".

A estos componentes se les pueden inyectar componentes de "servicio" y "valor" como dependencias. Hemos visto esto en un tema anterior con el servicio $http.

AngularJS módulo Registra objetos inyectables mediante cinco recetas.

Ya hemos visto que el servicio $http se puede utilizar dentro de AngularJS para obtener datos de un MySQL o EM SQL Base de datos del servidor a través de un PHP Aplicación web.

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

sampleApp.controller ('AngularJSController', function ($scope, $http)

Ahora, cuando el servicio $http está definido en el controlador como se muestra arriba. Significa que el controlador ahora depende del servicio $http.

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

1. Verifique si se ha creado una instancia del “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 no se ha creado una instancia del servicio $http, AngularJS utiliza la función "fábrica" ​​para construir un objeto $http.
3. El inyector dentro de AngularJS proporciona entonces una instancia del servicio $http a nuestro controlador para su posterior procesamiento.

Formularios de anotación: Anotación implícita lee los nombres de los parámetros, por lo que la minificación lo rompe. La notación de matriz en línea y $inject sobreviven; ng-strict-di en ng-app rechaza la anotación implícita.

Ahora que la dependencia está inyectada en nuestro controlador, podemos invocar las funciones necesarias dentro del servicio $http para su posterior procesamiento.

Ejemplo de inyección de dependencia

En este ejemplo, aprenderemos cómo utilizar la inyección de dependencia en AngularJS.

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

1. Uno es a través del “Componente de Valor”
2. Otra 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 crear un sistema sencillo. JavaScript objeto y pasándolo al controlador para su posterior procesamiento.

Esto se implementa utilizando los dos pasos siguientes.

Paso 1) Créar un JavaCree un objeto de script utilizando el componente de valor y adjúntelo a su módulo principal de AngularJS.

El componente de valor toma dos parámetros; uno es la clave y el otro es el valor de la JavaObjeto de script que se crea.

Paso 2) Acceda al JavaObjeto de script de la Controlador AngularJS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

El código anterior realiza los pasos siguientes

1. sampleApp.value("TutorialID", 5);

   Se está utilizando la función de valor del módulo AngularJS para crear un par clave-valor llamado “TutorialID” y el valor “5”.

2. sampleApp.controller('AngularJSController', function ($scope,TutorialID)

   La variable TutorialID ahora es accesible para el controlador como parámetro de función.

3.  $scope.ID =TutorialID;

   El valor de TutorialID, que es 5, ahora se está asignando a otra variable llamada ID en el Alcance objeto. Esto se hace para que el valor 5 pueda pasarse del controlador a la vista.

4. {{ID}}

   El parámetro ID se muestra en la vista como una expresión, por lo que la salida "5" se mostrará en la página.

Cuando se ejecuta el código anterior, el resultado se mostrará como se muestra a continuación

2) Servicio

El servicio se define como un singleton. JavaObjeto de script que consta de un conjunto de funciones que desea exponer e inyectar en su controlador.

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

(obtener(), consultar(), guardar(), eliminar(), eliminar()).

Estas funciones luego se pueden invocar desde su controlador en consecuencia.

Veamos un ejemplo sencillo de cómo puedes crear tu propio servicio. Vamos a crear un servicio de suma simple que suma dos números.

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

En el ejemplo anterior se llevan a cabo los siguientes pasos

1.  mainApp.service('AdditionService', function()

   Aquí estamos creando un nuevo servicio llamado 'AdditionService' utilizando el parámetro de servicio de nuestro módulo principal de AngularJS.

2.  this.ADDITION = function(a,b)

   Aquí creamos una nueva función llamada ADDITION dentro de nuestro servicio. Esto significa que cuando AngularJS instancie nuestro AdditionService dentro de nuestro controlador, podremos acceder a la función 'ADDITION'. En la definición de esta función, indicamos que acepta dos parámetros: a y b.

3.  return a+b;

   Aquí definimos el cuerpo de nuestra función ADDITION, que simplemente suma los parámetros y devuelve el valor sumado.

4.  mainApp.controller('DemoController', function($scope, AdditionService)

   Este es el paso principal que implica la inyección de dependencias. En la definición de nuestro controlador, ahora hacemos referencia a nuestro servicio 'AdditionService'. Cuando AngularJS lo detecte, instanciará un objeto de tipo 'AdditionService'.

5.  $scope.result = AdditionService.ADDITION(5,6);

   Ahora estamos accediendo a la función 'ADDITION' que está definida en nuestro servicio y asignándola al objeto $scope del controlador.

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

Preguntas Frecuentes