Avhengighetsinjeksjon i AngularJS med eksempel

Hva er avhengighetsinjeksjon i AngularJS?

Dependency Injection er et mønster for programvaredesign som implementerer inversjon av kontroll for å løse avhengigheter.

Inversjon av kontroll : Det betyr at objekter ikke lager andre objekter som de stoler på å utføre sitt arbeid på. I stedet får de disse gjenstandene fra en ekstern kilde. Dette danner grunnlaget for avhengighetsinjeksjon hvor hvis et objekt er avhengig av et annet; det primære objektet tar ikke ansvaret for å opprette det avhengige objektet og bruker deretter metodene. I stedet skaper en ekstern kilde (som i AngularJS, selve AngularJS-rammeverket) det avhengige objektet og gir det til kildeobjektet for videre bruk.

Så la oss først forstå hva en avhengighet er.

Ovenstående diagram viser et enkelt eksempel på et hverdagsritual i databaseprogrammering.

"Model" -boksen viser "modellklassen" som vanligvis opprettes for å samhandle med databasen. Så nå er databasen en avhengighet for at "Model class" skal fungere.
Ved avhengighetsinjeksjon lager vi en tjeneste for å hente all informasjonen fra databasen og komme inn i modellklassen.

I resten av denne opplæringen vil vi se mer på avhengighetsinjeksjon og hvordan dette oppnås i AngularJS.

I denne veiledningen vil du lære-

Hvilken komponent som kan injiseres som en avhengighet i AngularJS
Eksempel på avhengighetsinjeksjon

Verdikomponent
Service

Hvilken komponent som kan injiseres som en avhengighet i AngularJS

I Angular.JS injiseres avhengigheter ved å bruke en "injiserbar fabrikkmetode" eller "konstruktorfunksjon".

Disse komponentene kan injiseres med "service" og "verdi" komponenter som avhengigheter. Vi har sett dette i et tidligere emne med $ http-tjenesten.

Vi har allerede sett at $ http-tjenesten kan brukes i AngularJS for å få data fra en MySQL- eller MS SQL Server-database via en PHP-webapplikasjon.

$ Http-tjenesten defineres normalt fra kontrolleren på følgende måte.

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

Nå når $ http-tjenesten er definert i kontrolleren som vist ovenfor. Det betyr at kontrolleren nå har en avhengighet av $ http-tjenesten.

Så når koden ovenfor blir henrettet, vil AngularJS utføre følgende trinn:

Sjekk for å se om "$ http-tjenesten" er instantiert. Siden vår "kontroller" nå avhenger av "$ http-tjenesten", må en gjenstand for denne tjenesten gjøres tilgjengelig for kontrolleren vår.
Hvis AngularJS finner ut at $ http-tjenesten ikke er instantiert, bruker AngularJS 'fabrikk' -funksjonen til å konstruere et $ http-objekt.
Injektoren i Angular.JS gir deretter en forekomst av $ http-tjenesten til kontrolleren vår for videre behandling.

Nå som avhengigheten injiseres i kontrolleren vår, kan vi nå påkalle de nødvendige funksjonene i $ http-tjenesten for videre behandling.

Eksempel på avhengighetsinjeksjon

Avhengighetsinjeksjon kan implementeres på to måter

Den ene er gjennom "Verdikomponenten"
En annen er gjennom en "tjeneste"

La oss se på implementeringen av begge måter mer detaljert.

1) Verdikomponent

Dette konseptet er basert på det faktum at du oppretter et enkelt JavaScript-objekt og sender det til kontrolleren for videre behandling.

Dette implementeres ved hjelp av de to trinnene nedenfor

Trinn 1) Opprett et JavaScript-objekt ved hjelp av verdikomponenten og fest det til hoved AngularJS.JS-modulen.

Verdikomponenten har to parametere; den ene er nøkkelen, og den andre er verdien av javascript-objektet som opprettes.

Trinn 2) Få tilgang til JavaScript-objektet fra Angular.JS-kontrolleren

Event Registration
Guru99 Global Event
{{ID}}

I kodeeksemplet ovenfor blir hovedtrinnene nedenfor utført

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

Verdifunksjonen til Angular.JS JS-modulen brukes til å lage et nøkkelverdipar kalt "TutorialID" og verdien til "5".

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

TutorialID-variabelen blir nå tilgjengelig for kontrolleren som en funksjonsparameter.

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

Verdien av TutorialID som er 5, tildeles nå en annen variabel kalt ID i $ scope-objektet. Dette gjøres slik at verdien på 5 kan overføres fra kontrolleren til visningen.

```
{{ID}}
```

ID-parameteren vises i visningen som et uttrykk. Så resultatet av '5' vil vises på siden.

Når koden ovenfor kjøres, vil utgangen vises som nedenfor

2) Service

Tjeneste er definert som et enkelt JavaScript-objekt som består av et sett med funksjoner du vil eksponere og injisere i kontrolleren din.

For eksempel er "$ http" en tjeneste i Angular.JS som når den injiseres i kontrollerne, gir de nødvendige funksjonene til

(get (), spørring (), lagre (), fjern (), slett ()).

Disse funksjonene kan deretter påkalles fra kontrolleren din tilsvarende.

La oss se på et enkelt eksempel på hvordan du kan lage din egen tjeneste. Vi skal lage en enkel tilleggstjeneste som legger til to tall.

Event Registration
Guru99 Global Event

Result: {{result}}

I eksemplet ovenfor blir følgende trinn utført

 mainApp.service('AdditionService', function()

Her oppretter vi en ny tjeneste kalt 'AdditionService' ved hjelp av tjenesteparameteren til vår viktigste AngularJS JS-modul.

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

Her oppretter vi en ny funksjon kalt Addition i vår tjeneste. Dette betyr at når AngularJS instantierer vår AdditionService inne i kontrolleren vår, vil vi da kunne få tilgang til 'Addition' -funksjonen. I denne funksjonsdefinisjonen sier vi at denne funksjonen aksepterer to parametere, a og b.

```
 return a+b; 
```

Her definerer vi kroppen til tilleggsfunksjonen vår som ganske enkelt legger til parametrene og returnerer merverdien.

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

Dette er hovedtrinnet som innebærer avhengighetsinjeksjon. I vår kontrollerdefinisjon refererer vi nå til vår 'AdditionService' -tjeneste. Når AngularJS ser dette, vil det instantiere et objekt av typen 'AdditionService.'

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

Vi får nå tilgang til funksjonen 'Addition' som er definert i vår tjeneste og tilordner den til $ scope-objektet til kontrolleren.

Så dette er et enkelt eksempel på hvordan vi kan definere tjenesten vår og injisere funksjonaliteten til den tjenesten inne i kontrolleren vår.

Sammendrag:

Avhengighetsinjeksjon som navnet tilsier er prosessen med å injisere avhengig funksjonalitet i moduler på kjøretid.
Bruk av avhengighetsinjeksjon hjelper deg med å ha en mer gjenbrukbar kode. Hvis du hadde felles funksjonalitet som brukes på tvers av flere applikasjonsmoduler, er den beste måten å definere en sentral tjeneste med den funksjonaliteten og deretter injisere den tjenesten som en avhengighet i applikasjonsmodulene dine.
Verdiobjektet til AngularJS kan brukes til å injisere enkle JavaScript-objekter i kontrolleren din.
Servicemodulen kan brukes til å definere dine tilpassede tjenester som kan brukes på nytt over flere AngularJS-moduler.