AngularJS-afhankelijkheidsinjectie: welke componenten worden geïnjecteerd

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.

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 tutorial zullen we meer kijken naar afhankelijkheidsinjectie en hoe dit wordt bereikt in AngularJS.

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

In Angular.JS worden afhankelijkheden geïnjecteerd met behulp van een “injecteerbare fabrieksmethode” 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.

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 Angular.JS levert vervolgens een exemplaar van de $http-service aan onze controller voor verdere verwerking.

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 bezwaar maken en doorgeven aan de verwerkingsverantwoordelijke voor verdere verwerking.

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

Stap 1) Maak een JavaMaak een scriptobject met behulp van het waardecomponent en koppel het aan uw AngularJS.JS-hoofdmodule.

De waardecomponent krijgt twee parameters; de ene is de sleutel en de andere is de waarde van het JavaScript-object dat is gemaakt.

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

In het bovenstaande codevoorbeeld worden de onderstaande hoofdstappen uitgevoerd

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

De waardefunctie van de Angular.JS JS-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, die 5 is, wordt nu toegewezen aan een andere variabele genaamd ID in het object $scope. Dit wordt gedaan zodat de waarde 5 van de controller naar de weergave 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.

“$http” is bijvoorbeeld een service in Angular.JS die, wanneer geïnjecteerd in uw controllers, de noodzakelijke functies biedt van

( 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 genaamd 'AdditionService' met behulp van de serviceparameter van onze belangrijkste AngularJS JS-module.

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

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

3.  return a+b;

Hier definiëren we de hoofdtekst van onze optellingsfunctie, die eenvoudigweg de parameters optelt en de toegevoegde waarde retourneert.

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

Dit is de belangrijkste stap die afhankelijkheidsinjectie met zich meebrengt. In onze controllerdefinitie verwijzen we nu naar onze dienst 'AdditionService'. 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 'Toevoeging' die in onze service is gedefinieerd 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.

Samenvatting

• Dependency Injection, zoals de naam al aangeeft, is het proces waarbij tijdens runtime afhankelijke functionaliteit in modules wordt geïnjecteerd.
• Het gebruik van afhankelijkheidsinjectie helpt bij het verkrijgen van een meer herbruikbare code. Als u gemeenschappelijke functionaliteit had die door meerdere applicatiemodules wordt gebruikt, kunt u het beste een centrale service met die functionaliteit definiëren en die service vervolgens als afhankelijkheid in uw applicatiemodules injecteren.
• Het waardeobject van AngularJS kan worden gebruikt om eenvoudig te injecteren JavaScriptobjecten in uw controller met behulp van $inject in angularjs.
• De servicemodule kan worden gebruikt om uw aangepaste services te definiëren die kunnen worden hergebruikt in meerdere AngularJS-modules.