Afhængighedsinjektion i AngularJS med eksempel

Indholdsfortegnelse:

Anonim

Hvad er afhængighedsinjektion i AngularJS?

Dependency Injection er et softwaredesignmønster, der implementerer inversion af kontrol til løsning af afhængigheder.

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

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

Ovenstående diagram viser et simpelt eksempel på et dagligt ritual i databaseprogrammering.

  • Feltet 'Model' viser "Modelklassen", som normalt oprettes for at interagere med databasen. Så nu er databasen en afhængighed for, at "Model-klassen" fungerer.
  • Ved hjælp af afhængighedsindsprøjtning opretter vi en tjeneste til at hente al information fra databasen og komme ind i modelklassen.

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

I denne vejledning lærer du-

  • Hvilken komponent kan injiceres som en afhængighed i AngularJS
  • Eksempel på afhængighedsinjektion
    • Værdikomponent
    • Service

Hvilken komponent kan injiceres som en afhængighed i AngularJS

I Angular.JS injiceres afhængigheder ved hjælp af en "injicerbar fabriksmetode" eller "konstruktorfunktion".

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

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

$ Http-tjenesten defineres normalt 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 har en afhængighed af $ http-tjenesten.

Så når ovenstående kode bliver udført, udfører AngularJS følgende trin;

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

Nu hvor afhængigheden injiceres i vores controller, kan vi nu påberåbe de nødvendige funktioner inden for $ http-tjenesten til yderligere behandling.

Eksempel på afhængighedsinjektion

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 på implementeringen af ​​begge måder mere detaljeret.

1) Værdikomponent

Dette koncept er baseret på det faktum at oprette et simpelt JavaScript-objekt og videregive det til controlleren til videre behandling.

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

Trin 1) Opret et JavaScript-objekt ved hjælp af værdikomponenten og vedhæft det til dit primære AngularJS.JS-modul.

Værdikomponenten har to parametre; den ene er nøglen, og den anden er værdien af ​​det javascript-objekt, der oprettes.

Trin 2) Få adgang til JavaScript-objektet fra Angular.JS-controlleren

Event Registration


Guru99 Global Event

{{ID}}

I ovenstående kodeeksempel udføres nedenstående hovedtrin

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

Værdifunktionen i Angular.JS JS-modulet bruges til at oprette et nøgleværdipar kaldet "TutorialID" og værdien "5".

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

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

  1.  $scope.ID =TutorialID;

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

  1. {{ID}}

ID-parameteren vises i visningen som et udtryk. Så output af '5' vises på siden.

Når ovenstående kode udføres, vises output som nedenfor

2) Service

Service er defineret som et enkelt JavaScript-objekt, der består af et sæt funktioner, som du vil eksponere og indsprøjte i din controller.

For eksempel er "$ http" en tjeneste i Angular.JS, som når de injiceres i dine controllere giver de nødvendige funktioner til

(get (), forespørgsel (), gem (), fjern (), slet ()).

Disse funktioner kan derefter påberåbes fra din controller i overensstemmelse hermed.

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

Event Registration

Guru99 Global Event




Result: {{result}}

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

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

Her opretter vi en ny tjeneste kaldet 'AdditionService' ved hjælp af serviceparameteren i vores vigtigste AngularJS JS-modul.

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

Her opretter vi en ny funktion kaldet Addition inden for vores service. Dette betyder, at når AngularJS instantierer vores AdditionService inde i vores controller, ville vi så være i stand til at få adgang til funktionen 'Addition'. I denne funktionsdefinition siger vi, at denne funktion accepterer to parametre, a og b.

  1.  return a+b;

Her definerer vi kroppen til vores Addition-funktion, som simpelthen tilføjer parametrene og returnerer merværdien.

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

Dette er det vigtigste trin, der involverer afhængighedsinjektion. I vores controller-definition henviser vi nu til vores 'AdditionService' service. Når AngularJS ser dette, vil det instantiere et objekt af typen 'AdditionService.'

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

Vi har nu adgang til funktionen 'Addition', der er defineret i vores service, og tildeler den til $ scope-objektet til controlleren.

Så dette er et simpelt eksempel på, hvordan vi kan definere vores service og indsprøjte funktionaliteten af ​​denne service inde i vores controller.

Resumé:

  • Afhængighedsinjektion, som navnet antyder, er processen med at indsprøjte afhængig funktionalitet i moduler på kørselstid.
  • Brug af afhængighedsinjektion hjælper med at have en mere genanvendelig kode. Hvis du havde fælles funktionalitet, der bruges på tværs af flere applikationsmoduler, er den bedste måde at definere en central tjeneste med denne funktionalitet og derefter injicere denne service som en afhængighed i dine applikationsmoduler.
  • Værdiobjektet for AngularJS kan bruges til at injicere enkle JavaScript-objekter i din controller.
  • Servicemodulet kan bruges til at definere dine tilpassede tjenester, som kan genbruges på tværs af flere AngularJS-moduler.