Afhankelijkheidsinjectie in AngularJS met voorbeeld

Wat is afhankelijkheidsinjectie in AngularJS?

Dependency Injection is een softwareontwerppatroon dat inversie van controle implementeert voor het oplossen van afhankelijkheden.

Inversion of Control : het betekent dat objecten geen andere objecten creëren waarop ze vertrouwen om hun werk te doen. In plaats daarvan halen ze deze objecten van een externe bron. Dit vormt de basis van afhankelijkheidsinjectie waarbij als het ene object afhankelijk is van het andere; het primaire object neemt niet de verantwoordelijkheid om het afhankelijke object te creëren en vervolgens zijn methoden te gebruiken. In plaats daarvan maakt een externe bron (die in AngularJS het AngularJS-framework zelf is) het afhankelijke object en geeft het aan het bronobject voor verder gebruik.

Laten we dus eerst begrijpen wat een afhankelijkheid is.

Het bovenstaande diagram toont een eenvoudig voorbeeld van een alledaags ritueel bij het programmeren van databases.

Het vak 'Model' geeft de 'Modelklasse' weer die normaal gesproken wordt gemaakt om met de database te communiceren. Dus nu is de database een afhankelijkheid voor de "Model class" om te functioneren.
Door afhankelijkheidsinjectie maken we een service om alle informatie uit de database te halen en in de modelklasse te komen.

In de rest van deze tutorial zullen we meer kijken naar afhankelijkheidsinjectie en hoe dit wordt bereikt in AngularJS.

In deze tutorial leer je-

Welke component kan worden geïnjecteerd als afhankelijkheid in AngularJS
Voorbeeld van afhankelijkheidsinjectie

Waardecomponent
Onderhoud

Welke component kan worden geïnjecteerd als afhankelijkheid in AngularJS

In Angular.JS worden afhankelijkheden geïnjecteerd met behulp van een "injecteerbare fabrieksmethode" of "constructorfunctie".

Deze componenten kunnen worden geïnjecteerd met "service" en "waarde" componenten als afhankelijkheden. We hebben dit in een eerder onderwerp gezien met de $ http-service.

We hebben al gezien dat de $ http-service binnen AngularJS kan worden gebruikt om gegevens uit een MySQL- of MS SQL Server-database te halen via een PHP-webapplicatie.

De $ http-service wordt normaal gesproken op de volgende manier vanuit de controller gedefinieerd.

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

Nu wanneer de $ http-service is gedefinieerd in de controller zoals hierboven weergegeven. Het betekent dat de controller nu afhankelijk is van de $ http-service.

Dus wanneer de bovenstaande code wordt uitgevoerd, zal AngularJS de volgende stappen uitvoeren;

Controleer of de "$ http-service" is geïnstantieerd. Aangezien onze "controller" nu afhankelijk is van de "$ http-service", moet een object van deze service beschikbaar worden gesteld aan onze controller.
Als AngularJS ontdekt dat de $ http-service niet geïnstantieerd is, gebruikt AngularJS de 'factory'-functie om een $ http-object te construeren.
De injector binnen Angular.JS levert dan een instantie van de $ http-service aan onze controller voor verdere verwerking.

Nu de afhankelijkheid in onze controller is geïnjecteerd, kunnen we nu de nodige functies binnen de $ http-service aanroepen voor verdere verwerking.

Voorbeeld van afhankelijkheidsinjectie

Afhankelijkheidsinjectie kan op 2 manieren worden geïmplementeerd

Een daarvan is via de "Waardecomponent"
Een andere is via een "Service"

Laten we de implementatie van beide manieren in meer detail bekijken.

1) Waardecomponent

Dit concept is gebaseerd op het feit dat een eenvoudig JavaScript-object wordt gemaakt en dat voor verdere verwerking aan de controller wordt doorgegeven.

Dit wordt geïmplementeerd met behulp van de onderstaande twee stappen

Stap 1) Maak een JavaScript-object met behulp van de waardecomponent en koppel het aan uw belangrijkste AngularJS.JS-module.

De waardecomponent neemt twee parameters aan; de ene is de sleutel en de andere is de waarde van het javascript-object dat wordt gemaakt.

Stap 2) Open het JavaScript-object vanaf de Angular.JS-controller

Event Registration
Guru99 Global Event
{{ID}}

In het bovenstaande codevoorbeeld worden de onderstaande hoofdstappen uitgevoerd

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

De waardefunctie van de Angular.JS JS-module wordt gebruikt om een sleutel / waarde-paar te maken genaamd "TutorialID" en de waarde van "5".

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

De TutorialID-variabele wordt nu toegankelijk voor de controller als een functieparameter.

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

De waarde van TutorialID die 5 is, wordt nu toegewezen aan een andere variabele genaamd ID in het $ scope-object. Dit wordt gedaan zodat de waarde van 5 kan worden doorgegeven van de controller naar de weergave.

```
{{ID KAART}}
```

De ID-parameter wordt in de weergave als een uitdrukking weergegeven. Dus de uitvoer van '5' wordt op de pagina weergegeven.

Wanneer de bovenstaande code wordt uitgevoerd, wordt de uitvoer weergegeven zoals hieronder

2) Dienst

Service wordt gedefinieerd als een singleton JavaScript-object dat bestaat uit een set functies die u wilt weergeven en in uw controller wilt injecteren.

De "$ http" is bijvoorbeeld een service in Angular.JS die, wanneer deze in uw controllers wordt geïnjecteerd, de nodige functies biedt voor

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

Deze functies kunnen vervolgens dienovereenkomstig vanaf uw controller worden opgeroepen.

Laten we eens kijken naar een eenvoudig voorbeeld van hoe u uw eigen service kunt creëren. We gaan een eenvoudige optelservice maken die twee getallen optelt.

Event Registration
Guru99 Global Event

Result: {{result}}

In het bovenstaande voorbeeld worden de volgende stappen uitgevoerd

 mainApp.service('AdditionService', function()

Hier maken we een nieuwe service genaamd 'AdditionService' met behulp van de serviceparameter van onze belangrijkste AngularJS JS-module.

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

Hier maken we een nieuwe functie genaamd Addition binnen onze service. Dit betekent dat wanneer AngularJS onze AdditionService instantieert in onze controller, we dan toegang hebben tot de functie 'Addition'. In deze functiedefinitie zeggen we dat deze functie twee parameters accepteert, a en b.

```
 return a+b; 
```

Hier definiëren we de body van onze Addition-functie die simpelweg de parameters toevoegt en de toegevoegde waarde retourneert.

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

Dit is de belangrijkste stap waarbij afhankelijkheid wordt geïnjecteerd. In onze controller-definitie verwijzen we nu naar onze 'AdditionService'-service. Wanneer AngularJS dit ziet, zal het een object van het type 'AdditionService' instantiëren.

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

We hebben nu toegang tot de functie 'Addition' die is gedefinieerd in onze service en wijzen deze toe aan het $ scope-object van de controller.

Dit is dus een eenvoudig voorbeeld van hoe we onze service kunnen definiëren en de functionaliteit van die service in onze controller kunnen injecteren.

Overzicht:

Dependency Injection, zoals de naam al aangeeft, is het proces van het injecteren van afhankelijke functionaliteit in modules tijdens runtime.
Het gebruik van afhankelijkheidsinjectie helpt bij het hebben van een meer herbruikbare code. Als u gemeenschappelijke functionaliteit had die in meerdere applicatiemodules wordt gebruikt, is de beste manier om een centrale service met die functionaliteit te definiëren en die service vervolgens als een afhankelijkheid in uw applicatiemodules te injecteren.
Het value-object van AngularJS kan worden gebruikt om eenvoudige JavaScript-objecten in uw controller te injecteren.
De servicemodule kan worden gebruikt om uw aangepaste services te definiëren die opnieuw kunnen worden gebruikt in meerdere AngularJS-modules.