AngularJS Dependency Injection Components

Wat is afhankelijkheidsinjectie in AngularJS?

Afhankelijkheid injectie in AngularJS is een softwareontwerppatroon dat inversie van controle implementeert voor het oplossen van afhankelijkheden. Het bepaalt hoe componenten hun afhankelijkheden behouden. Het kan worden gebruikt bij het definiëren van de componenten of bij het leveren van run- en configuratieblokken van de module. Hiermee kunt u de componenten herbruikbaar, testbaar en onderhoudbaar maken.

Inversie van controle: Het betekent dat objecten geen andere objecten creëren waarop ze vertrouwen om hun werk te doen. In plaats daarvan krijgen ze deze objecten van een externe bron. Dit vormt de basis van AngularJS Dependency Injection, waarbij het ene object afhankelijk is van het andere; het primaire object neemt niet de verantwoordelijkheid om het afhankelijke object te maken en vervolgens de methoden ervan te gebruiken. In plaats daarvan maakt een externe bron (die in AngularJS het AngularJS-framework zelf is) het afhankelijke object en geeft dit aan het bronobject voor verder gebruik.

⚠️ Versie-opmerking: De ondersteuning voor AngularJS is in januari 2022 beëindigd., zonder beveiligingspatches. Moderne Angular injecteert via @Injectable providers en injecteren()De onderstaande code blijft historisch.

Laten we dus eerst begrijpen wat een afhankelijkheid is.

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

• Het 'Model'-vakje toont de "Model class" die normaal gesproken wordt gemaakt om te interacteren met de database. Dus nu is de database een dependency voor de "Model class" om te functioneren.
• Door afhankelijkheidsinjectie creëren we een service om alle informatie uit de database te halen en in de modelklasse te komen.

In de rest van deze handleiding gaan we dieper in op dependency injection en hoe dit wordt bereikt in angularjs.

Welke component kan als afhankelijkheid worden geïnjecteerd in AngularJS?

In AngularJS worden afhankelijkheden geïnjecteerd met behulp van een "injecteerbare factory-methode" of "constructorfunctie".

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

Een AngularJS module registreert injecteerbare objecten via vijf recepten.

We hebben al gezien dat de $http-service binnen AngularJS kan worden gebruikt om gegevens uit een MySQL of MS SQL Serverdatabase via een PHP web applicatie.

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

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

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

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

1. Controleer of de “$http-service” is geïnstantieerd. Omdat onze “controller” nu afhankelijk is van de “$http service”, moet een object van deze dienst beschikbaar worden gesteld aan onze controller.
2. Als AngularJS ontdekt dat de $http-service niet is geïnstantieerd, gebruikt AngularJS de 'factory'-functie om een ​​$http-object te construeren.
3. De injector binnen AngularJS levert vervolgens een instantie van de $http-service aan onze controller voor verdere verwerking.

Annotatieformulieren: Impliciete annotatie Het leest parameternamen, dus minificatie maakt het onbruikbaar. Inline array-notatie en $inject blijven wel werken; ng-strict-di op ng-app verwerpt impliciete annotaties.

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

Voorbeeld van afhankelijkheidsinjectie

In dit voorbeeld leren we hoe we afhankelijkheidsinjectie in AngularJS kunnen gebruiken.

Afhankelijkheidsinjectie kan op 2 manieren worden geïmplementeerd

1. Eén daarvan is via de “Waardecomponent”
2. 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 creëren van een eenvoudige JavaScript object en dit doorgeven aan de controller voor verdere verwerking.

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

Stap 1) Maak een JavaScript het object door gebruik te maken van de `value`-component en koppel het aan je hoofdmodule van AngularJS.

Het waardecomponent heeft twee parameters: de ene is de sleutel en de andere is de waarde van het component. JavaScriptobject dat wordt aangemaakt.

Stap 2) Toegang tot de JavaScriptobject van de AngularJS-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>

De bovenstaande code voert de onderstaande stappen uit.

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

   De `value`-functie van de AngularJS-module wordt gebruikt om een ​​sleutel-waardepaar te creëren met de naam "TutorialID" en de waarde "5".

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

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

3.  $scope.ID =TutorialID;

   De waarde van TutorialID, namelijk 5, wordt nu toegewezen aan een andere variabele genaamd ID in de $bereik object. Dit wordt gedaan zodat de waarde 5 van de controller naar de view kan worden doorgegeven.

4. {{ID}}

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

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

2) Service

Service wordt gedefinieerd als een singleton JavaScriptobject dat bestaat uit een set functies die u wilt blootstellen en in uw controller wilt injecteren.

De parameter "$http" is bijvoorbeeld een service in AngularJS die, wanneer deze in je controllers wordt geïnjecteerd, de benodigde functionaliteit biedt.

( 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 maken. We gaan een eenvoudige optelservice maken die twee getallen optelt.

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

In het bovenstaande voorbeeld worden de volgende stappen uitgevoerd

1.  mainApp.service('AdditionService', function()

   Hier maken we een nieuwe service aan met de naam 'AdditionService', gebruikmakend van de serviceparameter van onze hoofdmodule van AngularJS.

2.  this.ADDITION = function(a,b)

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

3.  return a+b;

   Hier definiëren we de body van onze ADDITION-functie, die simpelweg de parameters optelt en de opgetelde waarde retourneert.

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

   Dit is de belangrijkste stap waarbij dependency injection een rol speelt. In onze controllerdefinitie verwijzen we nu naar onze 'AdditionService'-service. Wanneer AngularJS dit ziet, zal het een object van het type 'AdditionService' instantiëren.

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

   We hebben nu toegang tot de functie 'ADDITION', die is gedefinieerd in onze service, en kennen 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.

Veelgestelde vragen