Beroende injektion i AngularJS med exempel

Vad är beroendeinjektion i AngularJS?

Dependency Injection är ett mjukvarudesignmönster som implementerar inversion av kontroll för att lösa beroenden.

Inversion of Control : Det betyder att objekt inte skapar andra objekt som de förlitar sig på att göra sitt arbete på. Istället får de dessa objekt från en extern källa. Detta utgör grunden för beroendeinjektion, varvid om ett objekt är beroende av ett annat; det primära objektet tar inte ansvaret för att skapa det beroende objektet och använder sedan dess metoder. Istället skapar en extern källa (som i AngularJS är själva AngularJS-ramverket) det beroende objektet och ger det till källobjektet för vidare användning.

Så låt oss först förstå vad ett beroende är.

Ovanstående diagram visar ett enkelt exempel på en daglig ritual i databasprogrammering.

Rutan "Model" visar "Model class" som normalt skapas för att interagera med databasen. Så nu är databasen ett beroende för "modellklassen" att fungera.
Genom beroendeinsprutning skapar vi en tjänst för att hämta all information från databasen och komma in i modellklassen.

I resten av denna handledning kommer vi att titta mer på beroendeinjektion och hur detta uppnås i AngularJS.

I den här handledningen lär du dig-

Vilken komponent som kan injiceras som en beroende i AngularJS
Exempel på beroendeinjektion

Värdekomponent
Service

Vilken komponent som kan injiceras som en beroende i AngularJS

I Angular.JS injiceras beroenden med en "injicerbar fabriksmetod" eller "konstruktorfunktion".

Dessa komponenter kan injiceras med "service" och "value" -komponenter som beroenden. Vi har sett detta i ett tidigare ämne med tjänsten $ http.

Vi har redan sett att $ http-tjänsten kan användas inom AngularJS för att få data från en MySQL- eller MS SQL Server-databas via en PHP-webbapplikation.

Tjänsten $ http definieras normalt inifrån styrenheten på följande sätt.

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

Nu när $ http-tjänsten definieras i styrenheten som visas ovan. Det betyder att styrenheten nu har ett beroende av $ http-tjänsten.

Så när ovanstående kod körs kommer AngularJS att utföra följande steg;

Kontrollera om "$ http-tjänsten" har startats. Eftersom vår "controller" nu beror på "$ http-tjänsten", måste ett objekt av denna tjänst göras tillgängligt för vår controller.
Om AngularJS upptäcker att $ http-tjänsten inte är instanserad använder AngularJS funktionen "fabrik" för att konstruera ett $ http-objekt.
Injektorn inom Angular.JS tillhandahåller sedan en instans av $ http-tjänsten till vår controller för vidare bearbetning.

Nu när beroendet injiceras i vår styrenhet kan vi nu åberopa de nödvändiga funktionerna i $ http-tjänsten för vidare bearbetning.

Exempel på beroendeinjektion

Beroendeinjektion kan genomföras på två sätt

En är genom "Value Component"
En annan är genom en "tjänst"

Låt oss titta på implementeringen av båda sätten mer detaljerat.

1) Värdekomponent

Detta koncept är baserat på att skapa ett enkelt JavaScript-objekt och skicka det till styrenheten för vidare bearbetning.

Detta implementeras med hjälp av nedanstående två steg

Steg 1) Skapa ett JavaScript-objekt med hjälp av värdekomponenten och bifoga det till din huvudsakliga AngularJS.JS-modul.

Värdekomponenten har två parametrar; en är nyckeln och den andra är värdet på det javascript-objekt som skapas.

Steg 2) Gå till JavaScript-objektet från Angular.JS-kontrollenheten

Event Registration
Guru99 Global Event
{{ID}}

I ovanstående kodexempel utförs nedanstående huvudsteg

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

Värdefunktionen för Angular.JS JS-modulen används för att skapa ett nyckel-värdepar som heter "TutorialID" och värdet "5".

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

TutorialID-variabeln blir nu tillgänglig för styrenheten som en funktionsparameter.

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

Värdet på TutorialID som är 5 tilldelas nu en annan variabel som heter ID i $ scope-objektet. Detta görs så att värdet 5 kan överföras från styrenheten till vyn.

```
{{ID}}
```

ID-parametern visas i vyn som ett uttryck. Så resultatet av "5" visas på sidan.

När ovanstående kod exekveras kommer utmatningen att visas som nedan

2) Service

Tjänsten definieras som ett JavaScript-objekt för singleton som består av en uppsättning funktioner som du vill exponera och injicera i din controller.

Till exempel är "$ http" en tjänst i Angular.JS som när den injiceras i dina styrenheter ger nödvändiga funktioner för

(get (), fråga (), spara (), ta bort (), ta bort ()).

Dessa funktioner kan sedan åberopas från din controller i enlighet med detta.

Låt oss titta på ett enkelt exempel på hur du kan skapa din egen tjänst. Vi ska skapa en enkel tilläggstjänst som lägger till två nummer.

Event Registration
Guru99 Global Event

Result: {{result}}

I exemplet ovan utförs följande steg

 mainApp.service('AdditionService', function()

Här skapar vi en ny tjänst som heter 'AdditionService' med hjälp av serviceparametern i vår huvudsakliga AngularJS JS-modul.

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

Här skapar vi en ny funktion som heter Addition inom vår tjänst. Detta innebär att när AngularJS instanserar vår AdditionService inuti vår controller, skulle vi då kunna komma åt funktionen 'Addition'. I denna funktionsdefinition säger vi att den här funktionen accepterar två parametrar, a och b.

```
 return a+b; 
```

Här definierar vi kroppen för vår tilläggsfunktion som helt enkelt lägger till parametrarna och returnerar mervärdet.

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

Detta är det viktigaste steget som involverar beroendeinjektion. I vår controller-definition hänvisar vi nu till vår 'AdditionService'-tjänst. När AngularJS ser detta kommer det att skapa ett objekt av typen 'AdditionService'.

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

Vi har nu tillgång till funktionen 'Addition' som definieras i vår tjänst och tilldelar den till $ scope-objektet för styrenheten.

Så detta är ett enkelt exempel på hur vi kan definiera vår tjänst och injicera funktionaliteten för den tjänsten inuti vår styrenhet.

Sammanfattning:

Dependency Injection är som namnet antyder processen att injicera beroende funktionalitet i moduler vid körning.
Användning av beroendeinjektion hjälper till att ha en mer återanvändbar kod. Om du hade gemensam funktionalitet som används i flera applikationsmoduler är det bästa sättet att definiera en central tjänst med den funktionen och sedan injicera den tjänsten som ett beroende i dina applikationsmoduler.
Värdeobjektet för AngularJS kan användas för att injicera enkla JavaScript-objekt i din controller.
Servicemodulen kan användas för att definiera dina anpassade tjänster som kan återanvändas i flera AngularJS-moduler.