AngularJS Dependency Injection: Hvilke komponenter injiceres

Hvad er afhængighedsinjektion i AngularJS?

Afhængighed Injektion i AngularJS er et softwaredesignmønster, der implementerer inversion af kontrol for at løse afhængigheder. Det bestemmer, hvordan komponenter bevarer deres afhængigheder. Det kan bruges, mens komponenterne defineres eller modulets kørsels- og konfigurationsblokke. Det giver dig mulighed for at gøre komponenterne genbrugelige, testbare og vedligeholdelige.

Inversion af kontrol: Det betyder, at objekter ikke skaber andre objekter, som de er afhængige af for at udføre deres arbejde. I stedet får de disse genstande fra en ekstern kilde. Dette danner grundlaget for AngularJS Dependency Injection, hvor hvis et objekt er afhængigt af et andet; det primære objekt påtager sig ikke ansvaret for at skabe det afhængige objekt og derefter bruge dets metoder. I stedet opretter en ekstern kilde (som i AngularJS er selve AngularJS frameworket) det afhængige objekt og giver det til kildeobjektet til videre brug.

Så lad os først forstå, hvad en afhængighed er.

Ovenstående diagram viser et simpelt AngularJS afhængighedsindsprøjtning eksempel på et hverdagsritual i databaseprogrammering.

'Model'-boksen viser "Modelklassen", som normalt oprettes til at interagere med databasen. Så nu er databasen en afhængighed for, at "modelklassen" kan fungere.
Ved afhængighedsinjektion opretter vi en service til at få fat i al information fra databasen og komme ind i modelklassen.

I resten af denne tutorial vil vi se mere på afhængighedsinjektion, og hvordan dette opnås i AngularJS.

Hvilken komponent kan injiceres som en afhængighed i AngularJS?

I Angular.JS injiceres afhængigheder ved at bruge en "injicerbar fabriksmetode" eller "konstruktørfunktion".

Disse komponenter kan injiceres med "service" og "værdi" komponenter som afhængigheder. Vi har set dette i et tidligere emne med $http-tjenesten.

Vi har allerede set, at $http-tjenesten kan bruges i AngularJS til at hente data fra en MySQL eller MS SQL Serverdatabase via en PHP webapplikation.

$http-tjenesten defineres normalt inde fra controlleren på følgende måde.

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

Nu når $http-tjenesten er defineret i controlleren som vist ovenfor. Det betyder, at controlleren nu er afhængig af $http-tjenesten.

Så når ovenstående kode bliver eksekveret, vil AngularJS udføre følgende trin;

Tjek for at se, om "$http-tjenesten" er blevet instantieret. Da vores "controller" nu afhænger af "$http-tjenesten", skal et objekt af denne tjeneste gøres tilgængeligt for vores controller.
Hvis AngularJS finder ud af, at $http-tjenesten ikke er instantieret, bruger AngularJS 'fabriks'-funktionen til at konstruere et $http-objekt.
Injektoren i Angular.JS leverer derefter en instans af $http-tjenesten til vores controller til yderligere behandling.

Nu hvor afhængigheden er injiceret i vores controller, kan vi nu påkalde de nødvendige funktioner i $http-tjenesten til yderligere behandling.

Eksempel på afhængighedsinjektion

I dette eksempel vil vi lære, hvordan man bruger afhængighedsinjektion i AngularJS.

Afhængighedsinjektion kan implementeres på 2 måder

Den ene er gennem "Værdikomponenten"
En anden er gennem en "service"

Lad os se mere detaljeret på implementeringen af begge måder.

1) Værdikomponent

Dette koncept er baseret på det faktum at skabe en enkel JavaScript genstand og videregive den til den registeransvarlige til videre behandling.

Dette implementeres ved hjælp af nedenstående to trin

Trin 1) Opret en JavaScript-objekt ved at bruge værdi-komponenten og vedhæft det til dit AngularJS.JS-hovedmodul.

Værdikomponenten antager to parametre; den ene er nøglen, og den anden er værdien af det javascript-objekt, der oprettes.

Trin 2) Adgang til JavaScript objekt fra Angular.JS controller

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

I ovenstående kodeeksempel udføres nedenstående hovedtrin

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

Værdifunktionen i Angular.JS JS-modulet bliver brugt til at skabe et nøgle-værdi-par kaldet "TutorialID" og værdien "5".

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

TutorialID-variablen bliver nu tilgængelig for controlleren som en funktionsparameter.

```
 $scope.ID =TutorialID;
```

Værdien af TutorialID, som er 5, bliver nu tildelt en anden variabel kaldet ID i $scope-objektet. Dette gøres for at værdien 5 kan overføres fra controlleren til visningen.

```
{{ID}}
```

ID-parameteren vises i visningen som et udtryk. Så outputtet af '5' vil blive vist på siden.

Når ovenstående kode udføres, vil outputtet blive vist som nedenfor

2) Service

Service er defineret som en singleton JavaScriptobjekt, der består af et sæt funktioner, som du vil eksponere og injicere i din controller.

For eksempel er "$http" en tjeneste i Angular.JS, som, når den injiceres i dine controllere, giver de nødvendige funktioner til

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

Disse funktioner kan derefter aktiveres fra din controller i overensstemmelse hermed.

Lad os se på et simpelt eksempel på, hvordan du kan oprette din egen tjeneste. Vi skal lave en simpel tilføjelsestjeneste, som tilføjer to tal.

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

I ovenstående eksempel udføres følgende trin

 mainApp.service('AdditionService', function()

Her er vi ved at oprette en ny service kaldet 'AdditionService' ved at bruge serviceparameteren i vores hovedmodul AngularJS JS.

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

Her laver vi en ny funktion kaldet Tilføjelse i vores service. Dette betyder, at når AngularJS instansierer vores AdditionService inde i vores controller, vil vi så kunne få adgang til 'Addition'-funktionen. I denne funktionsdefinition siger vi, at denne funktion accepterer to parametre, a og b.

```
 return a+b;
```

Her definerer vi kroppen af vores tilføjelsesfunktion, som blot tilføjer parametrene og returnerer den tilføjede værdi.

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

Dette er det vigtigste trin, som involverer afhængighedsinjektion. I vores controllerdefinition refererer vi nu til vores 'AdditionService'-tjeneste. Når AngularJS ser dette, vil det instansiere et objekt af typen 'AdditionService'.

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

Vi får nu adgang til funktionen 'Addition', som er defineret i vores service, og tildeler den til $scope-objektet for controlleren.

Så dette er et simpelt eksempel på, hvordan vi kan definere vores service og injicere funktionaliteten af den service inde i vores controller.

Resumé

Dependency Injection, som navnet antyder, er processen med at injicere afhængig funktionalitet i moduler under kørsel.
Brug af afhængighedsinjektion hjælper med at have en mere genbrugelig kode. Hvis du havde fælles funktionalitet, der bruges på tværs af flere applikationsmoduler, er den bedste måde at definere en central tjeneste med den funktionalitet og derefter injicere denne tjeneste som en afhængighed i dine applikationsmoduler.
Værdiobjektet i AngularJS kan bruges til at injicere simple JavaScriptobjekter i din controller ved hjælp af $inject in AngularJS.
Servicemodulet kan bruges til at definere dine brugerdefinerede tjenester, som kan genbruges på tværs af flere AngularJS-moduler.