AngularJS Afhængighedsinjektionskomponenter

Hvad er afhængighedsinjektion i AngularJS?

Afhængighed Injektion i AngularJS er et softwaredesignmønster, der implementerer inversion af kontrol for at løse afhængigheder. Det bestemmer, hvordan komponenter bevarer deres afhængigheder. Det kan bruges, mens komponenterne defineres eller modulets kørsels- og konfigurationsblokke. Det giver dig mulighed for at gøre komponenterne genbrugelige, testbare og vedligeholdelige.

Inversion af kontrol: Det betyder, at objekter ikke skaber andre objekter, som de er afhængige af for at udføre deres arbejde. I stedet får de disse genstande fra en ekstern kilde. Dette danner grundlaget for AngularJS Dependency Injection, hvor hvis et objekt er afhængigt af et andet; det primære objekt påtager sig ikke ansvaret for at skabe det afhængige objekt og derefter bruge dets metoder. I stedet opretter en ekstern kilde (som i AngularJS er selve AngularJS frameworket) det afhængige objekt og giver det til kildeobjektet til videre brug.

⚠️ Versionsnotat: AngularJS-support ophørte i januar 2022, uden sikkerhedsrettelser. Moderne Angular injicerer via @Injectable-udbydere og indsprøjte()Koden nedenfor forbliver historisk.

Så lad os først forstå, hvad en afhængighed er.

Ovenstående diagram viser et simpelt AngularJS afhængighedsindsprøjtning eksempel på et hverdagsritual i databaseprogrammering.

• 'Model'-boksen viser "Modelklassen", som normalt oprettes til at interagere med databasen. Så nu er databasen en afhængighed for, at "modelklassen" kan fungere.
• Ved afhængighedsinjektion opretter vi en service til at få fat i al information fra databasen og komme ind i modelklassen.

I resten af ​​denne vejledning vil vi se mere på afhængighedsinjektion og hvordan dette opnås i AngularJS.

Hvilken komponent kan injiceres som en afhængighed i AngularJS

I AngularJS injiceres afhængigheder ved hjælp af en "injicerbar fabriksmetode" eller "konstruktørfunktion".

Disse komponenter kan injiceres med "service" og "værdi" komponenter som afhængigheder. Vi har set dette i et tidligere emne med $http-tjenesten.

En AngularJS modul registrerer injicerbare objekter gennem fem opskrifter.

Vi har allerede set, at $http-tjenesten kan bruges i AngularJS til at hente data fra en MySQL eller MS SQL Serverdatabase via en PHP webapplikation.

$http-tjenesten defineres normalt inde fra controlleren på følgende måde.

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

Nu når $http-tjenesten er defineret i controlleren som vist ovenfor. Det betyder, at controlleren nu er afhængig af $http-tjenesten.

Så når ovenstående kode bliver eksekveret, vil AngularJS udføre følgende trin;

1. Tjek for at se, om "$http-tjenesten" er blevet instantieret. Da vores "controller" nu afhænger af "$http-tjenesten", skal et objekt af denne tjeneste gøres tilgængeligt for vores controller.
2. Hvis AngularJS finder ud af, at $http-tjenesten ikke er instantieret, bruger AngularJS 'fabriks'-funktionen til at konstruere et $http-objekt.
3. Injektoren i AngularJS leverer derefter en instans af $http-tjenesten til vores controller til videre behandling.

Annotationsformer: Implicit annotering læser parameternavne, så minificering afbryder den. Både inline array-notation og $inject overlever den; ng-strict-di på ng-app afviser implicit annotation.

Nu hvor afhængigheden er injiceret i vores controller, kan vi nu påkalde de nødvendige funktioner i $http-tjenesten til yderligere behandling.

Eksempel på afhængighedsinjektion

I dette eksempel vil vi lære, hvordan man bruger afhængighedsinjektion i AngularJS.

Afhængighedsinjektion kan implementeres på 2 måder

1. Den ene er gennem "Værdikomponenten"
2. En anden er gennem en "service"

Lad os se mere detaljeret på implementeringen af ​​begge måder.

1) Værdikomponent

Dette koncept er baseret på at skabe en simpel JavaScript objektet og sender det til controlleren til videre behandling.

Dette implementeres ved hjælp af nedenstående to trin

Trin 1) Opret en JavaScript-objektet ved hjælp af value-komponenten og tilknyt det til dit primære AngularJS-modul.

Værdikomponenten antager to parametre; den ene er nøglen, og den anden er værdien af JavaScriptobjekt, der oprettes.

Trin 2) Adgang til JavaScript objekt fra 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>

Koden ovenfor udfører nedenstående trin

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

   AngularJS-modulets værdifunktion bruges til at oprette et nøgle-værdi-par kaldet "TutorialID" og værdien "5".

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

   TutorialID-variablen bliver nu tilgængelig for controlleren som en funktionsparameter.

3.  $scope.ID =TutorialID;

   Værdien af ​​TutorialID, som er 5, tildeles nu en anden variabel kaldet ID i $omfang objekt. Dette gøres, så værdien 5 kan sendes fra controlleren til visningen.

4. {{ID}}

   ID-parameteren vises i visningen som et udtryk. Så outputtet af '5' vil blive vist på siden.

Når ovenstående kode udføres, vil outputtet blive vist som nedenfor

2) Service

Service er defineret som en singleton JavaScriptobjekt, der består af et sæt funktioner, som du vil eksponere og injicere i din controller.

For eksempel er "$http" en tjeneste i AngularJS, som, når den injiceres i dine controllere, leverer de nødvendige funktioner til

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

Disse funktioner kan derefter aktiveres fra din controller i overensstemmelse hermed.

Lad os se på et simpelt eksempel på, hvordan du kan oprette din egen tjeneste. Vi skal lave en simpel tilføjelsestjeneste, som tilføjer to tal.

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

I ovenstående eksempel udføres følgende trin

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

   Her opretter vi en ny service kaldet 'AdditionService' ved hjælp af serviceparameteren i vores primære AngularJS-modul.

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

   Her opretter vi en ny funktion kaldet ADDITION i vores service. Det betyder, at når AngularJS instantierer vores AdditionService i vores controller, vil vi kunne tilgå funktionen 'ADDITION'. I denne funktionsdefinition siger vi, at denne funktion accepterer to parametre, a og b.

3.  return a+b;

   Her definerer vi brødteksten i vores ADDITION-funktion, som blot lægger parametrene sammen og returnerer den tilføjede værdi.

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

   Dette er hovedtrinnet, der involverer afhængighedsinjektion. I vores controllerdefinition refererer vi nu til vores 'AdditionService'-tjeneste. Når AngularJS ser dette, vil den instantiere et objekt af typen 'AdditionService'.

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

   Vi tilgår nu funktionen 'ADDITION', som er defineret i vores tjeneste, og tildeler den til controllerens $scope-objekt.

Så dette er et simpelt eksempel på, hvordan vi kan definere vores service og injicere funktionaliteten af ​​den service inde i vores controller.

Ofte Stillede Spørgsmål