Iniezione delle dipendenze AngularJS: quali componenti sono stati iniettati

Cos'è l'iniezione di dipendenza in AngularJS?

Iniezione di dipendenza in AngularJS è un modello di progettazione software che implementa l'inversione del controllo per risolvere le dipendenze. Decide come i componenti mantengono le loro dipendenze. Può essere utilizzato durante la definizione dei componenti o fornendo blocchi di esecuzione e configurazione del modulo. Consente di rendere i componenti riutilizzabili, testabili e manutenibili.

Inversione di controllo: Significa che gli oggetti non creano altri oggetti su cui fanno affidamento per svolgere il loro lavoro. Invece, ottengono questi oggetti da una fonte esterna. Ciò costituisce la base di AngularJS Dependency Injection in cui se un oggetto dipende da un altro; l'oggetto primario non si assume la responsabilità di creare l'oggetto dipendente e quindi di utilizzarne i metodi. Invece, una fonte esterna (che in AngularJS è il framework AngularJS stesso) crea l'oggetto dipendente e lo fornisce all'oggetto sorgente per un ulteriore utilizzo.

Quindi capiamo prima cos'è una dipendenza.

Il diagramma sopra mostra un semplice esempio di iniezione di dipendenze AngularJS di un rituale quotidiano nella programmazione di database.

• La casella 'Modello' raffigura la "classe Modello" che normalmente viene creata per interagire con il database. Quindi ora il database è una dipendenza per il funzionamento della "classe Modello".
• Mediante l'inserimento delle dipendenze, creiamo un servizio per acquisire tutte le informazioni dal database e inserirle nella classe del modello.

Nel resto di questo tutorial, esamineremo più approfonditamente l'inserimento delle dipendenze e il modo in cui ciò viene realizzato in AngularJS.

Quale componente può essere inserito come dipendenza in AngularJS?

In Angular.JS, le dipendenze vengono iniettate utilizzando un "metodo di fabbrica iniettabile" o una "funzione di costruzione".

A questi componenti possono essere aggiunti componenti “servizio” e “valore” come dipendenze. Lo abbiamo visto in un argomento precedente con il servizio $http.

Abbiamo già visto che il servizio $http può essere utilizzato all'interno di AngularJS per ottenere dati da un file MySQL o MS SQL Database del server tramite a PHP applicazione web.

Il servizio $http viene normalmente definito dall'interno del controller nel modo seguente.

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

Ora, quando il servizio $http è definito nel controller come mostrato sopra. Ciò significa che il controller ora ha una dipendenza dal servizio $http.

Quindi, quando il codice sopra riportato viene eseguito, AngularJS eseguirà i seguenti passaggi:

1. Controlla se è stata creata un'istanza del “servizio $http”. Poiché il nostro "controllore" dipende ora dal "servizio $http", un oggetto di questo servizio deve essere reso disponibile al nostro controllore.
2. Se AngularJS scopre che il servizio $http non è istanziato, AngularJS utilizza la funzione 'factory' per costruire un oggetto $http.
3. L'iniettore all'interno di Angular.JS fornisce quindi un'istanza del servizio $http al nostro controller per un'ulteriore elaborazione.

Ora che la dipendenza è stata inserita nel nostro controller, possiamo richiamare le funzioni necessarie all'interno del servizio $http per l'ulteriore elaborazione.

Esempio di inserimento delle dipendenze

In questo esempio impareremo come utilizzare l'iniezione di dipendenza in AngularJS.

L'inserimento delle dipendenze può essere implementato in 2 modi

1. Uno è attraverso la “Componente Valore”
2. Un altro è attraverso un “Servizio”

Diamo un'occhiata all'implementazione di entrambi i modi in modo più dettagliato.

1) Componente di valore

Questo concetto si basa sul fatto di creare un semplice JavaCopione opporsi e trasmetterlo al titolare del trattamento per un ulteriore trattamento.

Questo viene implementato utilizzando i due passaggi seguenti

Passo 1) Creare un JavaCrea uno script dell'oggetto utilizzando il componente valore e collegalo al modulo principale AngularJS.JS.

La componente valore assume due parametri; uno è la chiave e l'altro è il valore dell'oggetto javascript creato.

Passo 2) Accedi al JavaOggetto script dal Controller 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>

Nell'esempio di codice precedente vengono eseguiti i passaggi principali riportati di seguito

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

La funzione valore del modulo Angular.JS JS viene utilizzata per creare una coppia chiave-valore denominata "TutorialID" e il valore "5".

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

La variabile TutorialID diventa ora accessibile al controller come parametro di funzione.

3.  $scope.ID =TutorialID;

Il valore di TutorialID che è 5, viene ora assegnato a un'altra variabile chiamata ID nell'oggetto $scope. Questo viene fatto in modo che il valore 5 possa essere passato dal controller alla vista.

4. {{ID}}

Il parametro ID viene visualizzato nella vista come espressione. Quindi l'output di "5" verrà visualizzato sulla pagina.

Quando viene eseguito il codice sopra, l'output verrà mostrato come di seguito

2) Servizio

Il servizio è definito come singleton JavaOggetto script costituito da un set di funzioni che si desidera esporre e iniettare nel controller.

Ad esempio, "$http" è un servizio in Angular.JS che, quando inserito nei controller, fornisce le funzioni necessarie di

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

Queste funzioni possono quindi essere richiamate di conseguenza dal controller.

Diamo un'occhiata a un semplice esempio di come puoi creare il tuo servizio. Creeremo un semplice servizio di addizione che aggiunge due numeri.

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

Nell'esempio sopra riportato vengono eseguiti i seguenti passaggi

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

Qui stiamo creando un nuovo servizio chiamato "AdditionService" utilizzando il parametro di servizio del nostro modulo JS AngularJS principale.

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

Qui stiamo creando una nuova funzione chiamata Addizione all'interno del nostro servizio. Ciò significa che quando AngularJS istanzia il nostro AdditionService all'interno del nostro controller, saremo quindi in grado di accedere alla funzione 'Addition'. In questa definizione di funzione, stiamo dicendo che questa funzione accetta due parametri, a e b.

3.  return a+b;

Qui stiamo definendo il corpo della nostra funzione Addizione che aggiunge semplicemente i parametri e restituisce il valore aggiunto.

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

Questo è il passaggio principale che prevede l'iniezione di dipendenza. Nella nostra definizione del controller, ora facciamo riferimento al nostro servizio "AdditionService". Quando AngularJS lo vedrà, creerà un'istanza di un oggetto di tipo "AdditionService".

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

Ora accediamo alla funzione 'Addizione' definita nel nostro servizio e la assegniamo all'oggetto $scope del controller.

Questo è quindi un semplice esempio di come possiamo definire il nostro servizio e iniettare la funzionalità di quel servizio all'interno del nostro controller.

Sommario

• L'inserimento delle dipendenze, come suggerisce il nome, è il processo di inserimento delle funzionalità dipendenti nei moduli in fase di esecuzione.
• L'uso dell'iniezione di dipendenza aiuta ad avere un codice più riutilizzabile. Se disponi di funzionalità comuni utilizzate su più moduli dell'applicazione, il modo migliore è definire un servizio centrale con tale funzionalità e quindi inserire tale servizio come dipendenza nei moduli dell'applicazione.
• L'oggetto value di AngularJS può essere utilizzato per iniettare simple JavaCrea script di oggetti nel tuo controller usando $inject in AngularJS.
• Il modulo di servizio può essere utilizzato per definire i servizi personalizzati che possono essere riutilizzati su più moduli AngularJS.