Iniezione di dipendenze in AngularJS con esempio

Cos'è l'iniezione di dipendenza in AngularJS?

Dependency Injection è un modello di progettazione software che implementa l'inversione del controllo per la risoluzione delle dipendenze.

Inversione del controllo : significa che gli oggetti non creano altri oggetti su cui si basano per svolgere il proprio lavoro. Invece, ottengono questi oggetti da una fonte esterna. Questo costituisce la base dell'iniezione di dipendenza in cui se un oggetto dipende da un altro; l'oggetto primario non si assume la responsabilità di creare l'oggetto dipendente e quindi utilizza i suoi metodi. Invece, una sorgente esterna (che in AngularJS, è il framework AngularJS stesso) crea l'oggetto dipendente e lo fornisce all'oggetto sorgente per un ulteriore utilizzo.

Quindi prima capiamo cos'è una dipendenza.

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

• La casella "Modello" raffigura la "Classe modello" che viene normalmente 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 accedere alla classe del modello.

Nel resto di questo tutorial, esamineremo più in dettaglio l'inserimento delle dipendenze e come questo viene realizzato in AngularJS.

In questo tutorial imparerai-

• Quale componente può essere iniettato come dipendenza in AngularJS
• Esempio di inserimento delle dipendenze
• Componente del valore
• Servizio

Quale componente può essere iniettato come dipendenza in AngularJS

In Angular.JS, le dipendenze vengono iniettate utilizzando un "metodo factory iniettabile" o una "funzione costruttore".

Questi componenti possono essere iniettati con 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 database MySQL o MS SQL Server tramite un'applicazione web PHP.

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. Significa che il controller ora ha una dipendenza dal servizio $ http.

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

1. Verificare se è stata creata un'istanza del "servizio $ http". Poiché il nostro "controllore" ora dipende 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 iniettata nel nostro controller, possiamo ora richiamare le funzioni necessarie all'interno del servizio $ http per ulteriori elaborazioni.

Esempio di inserimento delle dipendenze

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

1. Uno è attraverso la "Componente del valore"
2. Un altro è attraverso un "Servizio"

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

1) Componente del valore

Questo concetto si basa sul fatto di creare un semplice oggetto JavaScript e di passarlo al controller per un'ulteriore elaborazione.

Ciò viene implementato utilizzando i due passaggi seguenti

Passaggio 1) Crea un oggetto JavaScript utilizzando il componente value e collegalo al tuo modulo AngularJS.JS principale.

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

Passaggio 2) Accedi all'oggetto JavaScript dal controller Angular.JS

Guru99 Global Event
{{ID}}

Nell'esempio di codice precedente, vengono eseguiti i passaggi principali seguenti

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

La funzione valore del modulo JS Angular.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 denominata ID nell'oggetto $ scope. Questo viene fatto in modo che il valore di 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 nella pagina.

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

2) Servizio

Il servizio è definito come un oggetto JavaScript singleton costituito da un insieme di funzioni che si desidera esporre e inserire nel controller.

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

(get (), query (), save (), remove (), 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 aggiunta che aggiunge due numeri.

Guru99 Global Event

Result: {{result}}

Nell'esempio sopra, 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 Addition 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 Addition che semplicemente aggiunge i parametri e restituisce il valore aggiunto.

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

Questo è il passaggio principale che coinvolge l'inserimento delle dipendenze. Nella nostra definizione di controller, ora facciamo riferimento al nostro servizio "AdditionService". Quando AngularJS vede questo, istanzerà un oggetto di tipo "AdditionService".

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

Stiamo ora accedendo alla funzione "Addition" definita nel nostro servizio e assegnandola all'oggetto $ scope del controller.

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

Sommario:

• Dependency Injection, come suggerisce il nome, è il processo di iniezione di funzionalità dipendenti nei moduli in fase di esecuzione.
• L'uso dell'inserimento delle dipendenze aiuta ad avere un codice più riutilizzabile. Se si dispone di una funzionalità comune utilizzata in più moduli dell'applicazione, il modo migliore è definire un servizio centrale con quella funzionalità e quindi inserire tale servizio come dipendenza nei moduli dell'applicazione.
• L'oggetto valore di AngularJS può essere utilizzato per iniettare semplici oggetti JavaScript nel controller.
• Il modulo di servizio può essere utilizzato per definire i tuoi servizi personalizzati che possono essere riutilizzati su più moduli AngularJS.