Inyección de dependencia de AngularJS: qué componentes se inyectan

¿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.

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 la inyección de dependencia y cómo se logra en AngularJS.

¿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 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.

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 Angular.JS luego proporciona una instancia del servicio $http a nuestro controlador para su posterior procesamiento.

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 el hecho de crear un sencillo JavaGuión objeto y pasarlo 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 AngularJS.JS.

El componente de valor adopta dos parámetros; una es la clave y la otra es el valor del objeto javascript que se crea.

Paso 2) Accede a JavaObjeto de script de la Controlador Angular.JS

<! 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>

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

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

La función de valor del módulo Angular.JS JS se utiliza 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 asigna a otra variable llamada ID en el objeto $scope. Esto se hace para que se pueda pasar el valor 5 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 Angular.JS 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" usando el parámetro de servicio de nuestro módulo principal AngularJS JS.

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

Aquí estamos creando una nueva función llamada Suma dentro de nuestro servicio. Esto significa que cuando AngularJS crea una instancia de nuestro AdditionService dentro de nuestro controlador, podremos acceder a la función 'Adición'. En esta definición de función, decimos que esta función acepta dos parámetros, a y b.

3.  return a+b;

Aquí estamos definiendo el cuerpo de nuestra función Suma que simplemente agrega los parámetros y devuelve el valor agregado.

4.  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 hacemos referencia a nuestro servicio 'AdditionService'. Cuando AngularJS vea esto, creará una instancia de un objeto de tipo "AdditionService".

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

Ahora accedemos a la función 'Adición' que está definida en nuestro servicio y la asignamos 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.

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 tuviera una funcionalidad común que se utiliza 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 sus módulos de aplicación.
• El objeto de valor de AngularJS se puede utilizar para inyectar simples JavaObjetos de script en su controlador usando $inject en AngularJS.
• El módulo de servicio se puede utilizar para definir sus servicios personalizados que se pueden reutilizar en múltiples módulos de AngularJS.