Riippuvuusinjektio kulmassaJS esimerkin avulla

Mikä on riippuvuusinjektio AngularJS: ssä?

Dependency Injection on ohjelmistosuunnittelumalli, joka toteuttaa ohjauksen kääntämisen riippuvuuksien ratkaisemiseksi.

Hallinnan kääntäminen : Se tarkoittaa, että objektit eivät luo muita esineitä, joihin he luottavat työssään. Sen sijaan he saavat nämä esineet ulkopuolisesta lähteestä. Tämä muodostaa perustan riippuvuusinjektiolle, jossa jos yksi esine on riippuvainen toisesta; ensisijainen kohde ei ota vastuuta riippuvan objektin luomisesta ja käyttää sen menetelmiä. Sen sijaan ulkoinen lähde (joka AngularJS: ssä on itse AngularJS-kehys) luo riippuvan objektin ja antaa sen lähde-objektille jatkokäyttöä varten.

Joten ymmärretään ensin, mikä riippuvuus on.

Yllä oleva kaavio näyttää yksinkertaisen esimerkin jokapäiväisestä rituaalista tietokannan ohjelmoinnissa.

"Malli" -ruutu kuvaa "malliluokkaa", joka on yleensä luotu vuorovaikutukseen tietokannan kanssa. Joten nyt tietokanta on riippuvainen "Malliluokan" toiminnasta.
Riippuvuusinjektiolla luomme palvelun, joka tarttuu kaikkiin tietokannan tietoihin ja pääsee malliluokkaan.

Tämän opetusohjelman loppuosassa tarkastelemme enemmän riippuvuusinjektioita ja kuinka tämä saavutetaan AngularJS: ssä.

Tässä opetusohjelmassa opit-

Mikä komponentti voidaan pistää riippuvuutena kulma-JS: ssä
Esimerkki riippuvuuden injektiosta

Arvokomponentti
Palvelu

Mikä komponentti voidaan pistää riippuvuutena kulma-JS: ssä

Angular.JS: ssä riippuvuudet injektoidaan käyttämällä "injektoitavaa tehdasmenetelmää" tai "konstruktoritoimintoa".

Näihin komponentteihin voidaan injektoida "palvelu" ja "arvo" komponentteja riippuvuuksina. Olemme nähneet tämän aikaisemmassa aiheessa $ http -palvelun kanssa.

Olemme jo nähneet, että $ http -palvelua voidaan käyttää AngularJS: n sisällä tietojen saamiseksi MySQL- tai MS SQL Server -tietokannasta PHP-verkkosovelluksen kautta.

$ Http -palvelu määritetään normaalisti ohjaimesta seuraavalla tavalla.

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

Nyt kun $ http -palvelu on määritetty ohjaimessa, kuten yllä on esitetty. Se tarkoittaa, että ohjain on nyt riippuvainen $ http -palvelusta.

Joten kun yllä oleva koodi suoritetaan, AngularJS suorittaa seuraavat vaiheet;

Tarkista, onko "$ http -palvelu" instantioitu. Koska "ohjaimemme" riippuu nyt "$ http -palvelusta", tämän palvelun kohde on asetettava ohjaimemme saataville.
Jos AngularJS huomaa, että $ http -palvelua ei ole instantoitu, AngularJS käyttää 'tehdas' -funktiota $ http -objektin rakentamiseen.
Angular.JS: n injektori tarjoaa sitten $ http -palvelun esimerkin ohjaimellemme jatkokäsittelyä varten.

Nyt kun riippuvuus on injektoitu ohjaimeemme, voimme nyt kutsua tarvittavat toiminnot $ http -palvelussa jatkokäsittelyä varten.

Esimerkki riippuvuuden injektiosta

Riippuvuussyöttö voidaan toteuttaa kahdella tavalla

Yksi tapahtuu "Arvokomponentin" kautta
Toinen on "palvelun" kautta

Katsotaanpa molempien tapojen toteuttamista tarkemmin.

1) Arvokomponentti

Tämä käsite perustuu yksinkertaisen JavaScript-objektin luomiseen ja välittämiseen sen ohjaimelle jatkokäsittelyä varten.

Tämä toteutetaan käyttämällä kahta alla olevaa vaihetta

Vaihe 1) Luo JavaScript-objekti arvokomponentilla ja kiinnitä se pään AngularJS.JS-moduuliin.

Arvokomponentilla on kaksi parametria; yksi on avain ja toinen on luotavan javascript-objektin arvo.

Vaihe 2) Käytä JavaScript-objektia Angular.JS-ohjaimesta

Event Registration
Guru99 Global Event
{{ID}}

Edellä olevassa koodiesimerkissä suoritetaan seuraavat päävaiheet

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

Angular.JS JS -moduulin arvofunktiota käytetään luomaan avain-arvo-pari nimeltä "TutorialID" ja "5".

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

Muuttuja TutorialID tulee nyt ohjaimen saataville toimintoparametrina.

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

TutorialID-arvon, joka on 5, osoitetaan nyt toiselle muuttujalle nimeltä ID $ -objektissa. Tämä tehdään, jotta arvo 5 voidaan siirtää ohjaimelta näkymään.

```
{{ID}}
```

ID-parametri näytetään näkymässä lausekkeena. Joten '5': n tulos näkyy sivulla.

Kun yllä oleva koodi on suoritettu, lähtö näkyy kuten alla

2) Palvelu

Palvelu määritellään yksittäisenä JavaScript-objektina, joka koostuu joukosta toimintoja, jotka haluat paljastaa ja pistää ohjaimeesi.

Esimerkiksi "$ http" on Angular.JS-palvelu, joka ohjaimiin pistettynä tarjoaa tarvittavat toiminnot

(get (), kysely (), tallenna (), poista (), poista ()).

Näitä toimintoja voidaan sitten käyttää ohjaimestasi vastaavasti.

Katsotaanpa yksinkertaista esimerkkiä siitä, miten voit luoda oman palvelun. Aiomme luoda yksinkertaisen lisäyspalvelun, joka lisää kaksi numeroa.

Event Registration
Guru99 Global Event

Result: {{result}}

Edellä olevassa esimerkissä suoritetaan seuraavat vaiheet

 mainApp.service('AdditionService', function()

Tässä luomme uuden palvelun nimeltä AdditionService käyttämällä AngularJS-päämoduulin palveluparametria.

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

Tässä luomme palveluumme uuden toiminnon nimeltä Addition. Tämä tarkoittaa sitä, että kun AngularJS välittää AdditionService-palvelun ohjaimen sisällä, voimme sitten käyttää `` lisäys '' -toimintoa. Tässä funktion määritelmässä sanomme, että tämä toiminto hyväksyy kaksi parametria, a ja b.

```
 return a+b; 
```

Tässä määritellään lisäysfunktion runko, joka yksinkertaisesti lisää parametrit ja palauttaa lisäarvon.

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

Tämä on tärkein vaihe, johon liittyy riippuvuuden injektio. Ohjaimen määrittelyssä viitataan nyt AdditionService-palveluumme. Kun AngularJS see on tämä, se instantioi objektin, jonka tyyppi on 'AdditionService'.

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

Olemme nyt käyttämässä palvelussamme määriteltyä funktiota '' lisäys '' ja määrittelemällä sen ohjaimen $ scope -objektille.

Joten tämä on yksinkertainen esimerkki siitä, miten voimme määritellä palvelumme ja injektoida kyseisen palvelun toiminnallisuuden ohjaimeemme.

Yhteenveto:

Riippuvuusinjektio, kuten nimestä käy ilmi, on prosessi, jolla riippuvaisia toimintoja injektoidaan moduuleihin ajon aikana.
Riippuvuusinjektion käyttäminen auttaa saamaan uudelleenkäytettävämmän koodin. Jos sinulla on ollut yhteinen toiminnallisuus, jota käytetään useissa sovellusmoduuleissa, paras tapa on määritellä keskeinen palvelu kyseisellä toiminnolla ja sitten lisätä tämä palvelu riippuvuutena sovellusmoduuleihin.
AngularJS-arvoobjektia voidaan käyttää yksinkertaisten JavaScript-objektien lisäämiseen ohjaimeen.
Palvelumoduulia voidaan käyttää määrittämään mukautetut palvelut, joita voidaan käyttää uudelleen useissa AngularJS-moduuleissa.