Näidisega sõltuvuse süstimine nurk-JS-is

Mis on sõltuvuse süstimine AngularJS-is?

Dependency Injection on tarkvara kujundusmuster, mis rakendab sõltuvuste lahendamiseks juhtimise inversiooni.

Juhtimise inversioon : see tähendab, et objektid ei loo muid objekte, millele nad oma töö tegemisel tuginevad. Selle asemel saavad nad need objektid väljastpoolt. See on sõltuvuse süstimise alus, kus üks objekt sõltub teisest; esmane objekt ei võta vastutust sõltuva objekti loomise eest ja kasutab seejärel selle meetodeid. Selle asemel loob väline allikas (mis AngularJS-is on AngularJS raamistik ise) sõltuva objekti ja annab selle allikaobjektile edasiseks kasutamiseks.

Nii et mõistame kõigepealt, mis on sõltuvus.

Ülaltoodud diagramm näitab lihtsat näidet igapäevase rituaali kohta andmebaaside programmeerimisel.

Kast „Mudel” kujutab mudeliklassi, mis on tavaliselt loodud andmebaasiga suhtlemiseks. Nii et nüüd sõltub andmebaas "mudeli klassi" toimimisest.
Sõltuvuse süstimisega loome teenuse, et kogu andmebaasist pärinev teave haarata ja mudeliklassi pääseda.

Selle juhendaja ülejäänud osas vaatleme rohkem sõltuvuse süstimist ja seda, kuidas seda AngularJS-is saavutada.

Selles õpetuses saate teada

Millist komponenti saab nurkJS-i sõltuvusena süstida
Näide sõltuvuse süstimisest

Väärtuse komponent
Teenus

Millist komponenti saab nurkJS-i sõltuvusena süstida

Rakenduses Angular.JS süstitakse sõltuvusi "süstitava tehase meetodi" või "konstruktori funktsiooni" abil.

Nendesse komponentidesse saab süstida sõltuvustena "teenuse" ja "väärtuse" komponente. Oleme seda näinud varasemas teemas teenusega $ http.

Oleme juba näinud, et teenust $ http saab AngularJS-is kasutada PHS-i veebirakenduse kaudu andmete saamiseks MySQL või MS SQL Serveri andmebaasist.

Teenus $ http määratletakse tavaliselt kontrolleri sees järgmiselt.

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

Kui $ http teenus on kontrolleris määratletud, nagu eespool näidatud. See tähendab, et kontroller sõltub nüüd teenusest $ http.

Nii et kui ülaltoodud kood käivitatakse, täidab AngularJS järgmised sammud;

Kontrollige, kas teenus "$ http" on instantsitud. Kuna meie "kontroller" sõltub nüüd teenusest "$ http", tuleb selle teenuse objekt meie kontrollerile kättesaadavaks teha.
Kui AngularJS saab teada, et teenust $ http pole kohandatud, kasutab AngularJS objekti $ http koostamiseks funktsiooni 'tehas'.
Seejärel pakub Angular.JS-i pihusti meie kontrollerile teenuse $ http eksemplari edasiseks töötlemiseks.

Nüüd, kui sõltuvus on meie kontrollerisse sisestatud, saame nüüd teenuses $ http vajalikud funktsioonid edasiseks töötlemiseks kasutada.

Näide sõltuvuse süstimisest

Sõltuvuse süstimist saab rakendada kahel viisil

Üks on läbi "Väärtuse komponendi"
Teine on teenuse kaudu

Vaatame mõlema viisi rakendamist üksikasjalikumalt.

1) Väärtuskomponent

See kontseptsioon põhineb lihtsa JavaScripti objekti loomisel ja kontrollerile edasiseks töötlemiseks.

Selle rakendamiseks kasutatakse kahte allpool olevat sammu

Samm 1) Looge väärtuskomponendi abil JavaScripti objekt ja kinnitage see oma peamise mooduliga AngularJS.JS.

Väärtuse komponent võtab kaks parameetrit; üks on võti ja teine on loodud javascripti objekti väärtus.

2. samm. Juurdepääs JavaScripti objektile kontrollerist Angular.JS

Event Registration
Guru99 Global Event
{{ID}}

Ülaltoodud koodinäites viiakse läbi järgmised põhisammud

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

Mooduli Angular.JS JS väärtusfunktsiooni kasutatakse võtmeväärtuste paari nimega "TutorialID" ja väärtuse "5" loomiseks.

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

Muutuja TutorialID muutub kontrollerile nüüd funktsiooni parameetrina kättesaadavaks.

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

TutorialID väärtus, mis on 5, määratakse nüüd teisele muutujale, mida nimetatakse objektiks $ scope. Seda tehakse nii, et väärtus 5 saaks kontrollerilt vaadele edastada.

```
{{ID}}
```

Parameetrit ID kuvatakse vaates avaldisena. Nii et '5' väljund kuvatakse lehel.

Kui ülaltoodud kood on täidetud, kuvatakse väljund allpool toodud viisil

2) Teenindus

Teenus on defineeritud kui üksik JavaScripti objekt, mis koosneb funktsioonide komplektist, mille soovite oma kontrollerisse paljastada ja süstida.

Näiteks "$ http" on teenus Angular.JS-is, mis teie kontrolleritesse sisestades pakub vajalikke funktsioone

(saada (), päring (), salvestada (), eemaldada (), kustutada ()).

Neid funktsioone saab seejärel vastavalt oma kontrollerilt kasutada.

Vaatame lihtsat näidet selle kohta, kuidas saate oma teenust luua. Loome lihtsa lisamisteenuse, mis lisab kaks numbrit.

Event Registration
Guru99 Global Event

Result: {{result}}

Ülaltoodud näites viiakse läbi järgmised etapid

 mainApp.service('AdditionService', function()

Siin loome uue teenuse nimega AdditionService, kasutades meie peamise AngularJS JS mooduli teenuseparameetrit.

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

Siin loome oma teenuses uue funktsiooni Addition. See tähendab, et kui AngularJS installeerib meie AdditionService'i meie kontrolleri sees, saaksime seejärel juurde pääseda funktsioonile "Addition". Selles funktsiooni määratluses ütleme, et see funktsioon aktsepteerib kahte parameetrit, a ja b.

```
 return a+b; 
```

Siin määratleme oma lisafunktsiooni keha, mis lihtsalt lisab parameetrid ja tagastab lisaväärtuse.

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

See on peamine samm, mis hõlmab sõltuvuse süstimist. Meie kontrolleri definitsioonis viitame nüüd meie teenusele AdditionService. Kui AngularJS see on see, siis see instantsib objekti tüüpi "AdditionService".

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

Nüüd pääseme juurde teenuses määratletud funktsioonile „Addition” ja määrame selle kontrolleri $ scope objektile.

Nii et see on lihtne näide sellest, kuidas saame oma teenust määratleda ja selle teenuse funktsionaalsust oma kontrollerisse sisestada.

Kokkuvõte:

Sõltuvalt süsteemist süstitakse sõltuvalt funktsionaalsusest moodulitesse tööajal.
Sõltuvussüsti kasutamine aitab saada korduvkasutatavamat koodi. Kui teil oli ühine funktsionaalsus, mida kasutatakse mitmel rakendusemoodulil, on parim viis määratleda selle funktsiooniga keskne teenus ja seejärel sisestada see teenus oma rakendusemoodulite sõltuvusse.
AngularJS-i väärtuse objekti saab kasutada lihtsate JavaScripti objektide sisestamiseks teie kontrollerisse.
Teenusemoodulit saab kasutada teie kohandatud teenuste määratlemiseks, mida saab mitmes AngularJS moodulis uuesti kasutada.