Componenti di Dependency Injection per AngularJS

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.

⚠️ Nota sulla versione: Il supporto per AngularJS è terminato a gennaio 2022., senza patch di sicurezza. Angular moderno inietta tramite provider @Injectable e iniettare()Il codice seguente rimane storico.

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.

Nella parte restante di questo tutorial, esamineremo più a fondo l'iniezione di dipendenza e come questa viene realizzata in AngularJS.

Quale componente può essere iniettato come dipendenza in AngularJS?

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

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

Un AngularJS modulo Registra oggetti iniettabili attraverso cinque ricette.

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 AngularJS fornisce quindi un'istanza del servizio $http al nostro controller per l'ulteriore elaborazione.

Forme di annotazione: Annotazione implicita legge i nomi dei parametri, quindi la minimizzazione lo interrompe. La notazione array inline e $inject sopravvivono; ng-strict-di su ng-app rifiuta l'annotazione implicita.

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 sulla creazione di un semplice JavaCopione oggetto e passarlo al controller per l'ulteriore elaborazione.

Questo viene implementato utilizzando i due passaggi seguenti

Passo 1) Creare un JavaCrea un oggetto script utilizzando il componente value e collegalo al tuo modulo AngularJS principale.

Il componente valore assume due parametri; uno è la chiave e l'altro è il valore del JavaOggetto script che viene creato.

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

Il codice sopra riportato esegue i passaggi seguenti

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

   La funzione value del modulo AngularJS viene utilizzata per creare una coppia chiave-valore denominata "TutorialID" con 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 nel $scope oggetto. Questo viene fatto affinché 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 AngularJS che, se iniettato 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 service del nostro modulo 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 controller, saremo 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 definiamo il corpo della nostra funzione ADDITION, che semplicemente somma i parametri e restituisce il valore risultante.

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

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

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

   Stiamo ora accedendo alla funzione 'ADDITION' definita nel nostro servizio e la stiamo assegnando 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.

DOMANDE FREQUENTI