Vbrizgavanje odvisnosti v AngularJS s primerom

Kaj je vbrizgavanje odvisnosti v AngularJS?

Vbrizgavanje odvisnosti je vzorec načrtovanja programske opreme, ki izvaja inverzijo nadzora za reševanje odvisnosti.

Inverzija nadzora : To pomeni, da predmeti ne ustvarjajo drugih predmetov, na katerih se zanašajo, da bodo opravljali svoje delo. Namesto tega te predmete dobijo iz zunanjega vira. To je osnova za vbrizgavanje odvisnosti, če je en predmet odvisen od drugega; primarni objekt ne prevzame odgovornosti za ustvarjanje odvisnega predmeta in nato uporabi njegove metode. Namesto tega zunanji vir (ki je v AngularJS sam okvir AngularJS) ustvari odvisni objekt in ga preda izvornemu objektu za nadaljnjo uporabo.

Najprej torej razumemo, kaj je odvisnost.

Zgornji diagram prikazuje preprost primer vsakdanjega rituala pri programiranju baz podatkov.

Polje 'Model' prikazuje "razred modela", ki je običajno ustvarjen za interakcijo z bazo podatkov. Zdaj je torej baza podatkov odvisnost za delovanje razreda "Model".
Z vbrizganjem odvisnosti ustvarimo storitev za zajem vseh informacij iz baze podatkov in vstop v razred modela.

V nadaljevanju te vadnice si bomo bolj ogledali vbrizgavanje odvisnosti in kako to dosežemo v AngularJS.

V tej vadnici boste izvedeli-

Katero komponento lahko vbrizgamo kot odvisnost v AngularJS
Primer vbrizgavanja odvisnosti

Vrednostna komponenta
Storitev

Katero komponento lahko vbrizgamo kot odvisnost v AngularJS

V Angular.JS se odvisnosti vbrizgajo z uporabo "injekcijske tovarniške metode" ali "konstruktorske funkcije".

Te komponente lahko kot odvisnosti vbrizgamo s komponentami "storitve" in "vrednost". To smo videli v prejšnji temi s storitvijo $ http.

Že smo videli, da se storitev $ http lahko uporablja v programu AngularJS za pridobivanje podatkov iz baze podatkov MySQL ali MS SQL Server prek spletne aplikacije PHP.

Storitev $ http je običajno definirana znotraj krmilnika na naslednji način.

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

Zdaj, ko je storitev $ http definirana v krmilniku, kot je prikazano zgoraj. To pomeni, da je krmilnik zdaj odvisen od storitve $ http.

Ko bo zgornja koda izvršena, bo AngularJS izvedel naslednje korake;

Preverite, ali je bila nameščena instanca storitve "$ http". Ker je naš "krmilnik" zdaj odvisen od "$ http storitve", mora biti predmet te storitve na voljo našemu krmilniku.
Če AngularJS ugotovi, da storitev $ http ni instantirana, AngularJS uporabi funkcijo 'factory' za izdelavo predmeta $ http.
Vbrizgalnik znotraj Angular.JS nato posreduje primerek storitve $ http našemu krmilniku za nadaljnjo obdelavo.

Zdaj, ko je odvisnost vbrizgana v naš krmilnik, lahko zdaj pokličemo potrebne funkcije storitve $ http za nadaljnjo obdelavo.

Primer vbrizgavanja odvisnosti

Vbrizgavanje odvisnosti se lahko izvede na dva načina

Eden je skozi "komponento vrednosti"
Druga je prek "storitve"

Poglejmo podrobneje izvajanje obeh načinov.

1) Vrednostna komponenta

Ta koncept temelji na dejstvu, da ustvarite preprost objekt JavaScript in ga posredujete krmilniku za nadaljnjo obdelavo.

To je izvedeno v spodnjih dveh korakih

1. korak: Ustvarite objekt JavaScript s pomočjo komponente vrednosti in ga pritrdite na glavni modul AngularJS.JS.

Komponenta vrednosti ima dva parametra; eden je ključ, drugi pa vrednost ustvarjenega predmeta javascript.

Korak 2) Do predmeta JavaScript dostopite iz krmilnika Angular.JS

Event Registration
Guru99 Global Event
{{ID}}

V zgornjem primeru kode se izvajajo spodnji glavni koraki

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

Funkcija vrednosti modula Angular.JS JS se uporablja za ustvarjanje para ključ-vrednost, imenovanega "TutorialID" in vrednosti "5".

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

Spremenljivka TutorialID postane zdaj dostopna krmilniku kot funkcijski parameter.

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

Vrednost TutorialID, ki je 5, je zdaj dodeljena drugi spremenljivki, imenovani ID v objektu $ obseg. To se naredi tako, da se lahko vrednost 5 prenese iz krmilnika v pogled.

```
{{ID}}
```

Parameter ID je v pogledu prikazan kot izraz. Tako bo na strani prikazan izhod '5'.

Ko se zgornja koda izvede, bo izhod prikazan kot spodaj

2) Storitev

Storitev je definirana kot enokraten objekt JavaScript, sestavljen iz nabora funkcij, ki jih želite izpostaviti in vstaviti v krmilnik.

Na primer, "$ http" je storitev v Angular.JS, ki ob vbrizganju v vaše krmilnike nudi potrebne funkcije

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

Nato lahko te funkcije ustrezno prikliče vaš krmilnik.

Oglejmo si preprost primer, kako lahko ustvarite svojo storitev. Ustvarili bomo preprosto storitev dodajanja, ki doda dve številki.

Event Registration
Guru99 Global Event

Result: {{result}}

V zgornjem primeru so izvedeni naslednji koraki

 mainApp.service('AdditionService', function()

Tu ustvarjamo novo storitev, imenovano 'AdditionService', s pomočjo parametra storitve našega glavnega modula AngularJS JS.

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

Tu ustvarjamo novo funkcijo, imenovano Dodatek, v naši storitvi. To pomeni, da ko AngularJS ustvari našo AdditionService znotraj našega krmilnika, bomo lahko nato dostopali do funkcije 'Addition'. V tej definiciji funkcije rečemo, da ta funkcija sprejema dva parametra, a in b.

```
 return a+b; 
```

Tu definiramo telo naše funkcije dodajanja, ki preprosto doda parametre in vrne dodano vrednost.

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

To je glavni korak, ki vključuje injiciranje odvisnosti. V definiciji krmilnika se zdaj sklicujemo na našo storitev "AdditionService". Ko AngularJS vidi to, bo ustvaril objekt tipa "AdditionService."

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

Zdaj dostopamo do funkcije 'Addition', ki je definirana v naši storitvi, in jo dodelimo predmetu $ scope krmilnika.

To je torej preprost primer, kako lahko definiramo svojo storitev in vbrizgamo funkcionalnost te storitve znotraj našega krmilnika.

Povzetek:

Injection odvisnosti, kot že ime pove, je postopek vbrizgavanja odvisne funkcionalnosti v module v času izvajanja.
Uporaba vbrizgavanja odvisnosti pomaga pri bolj uporabni kodi. Če ste imeli skupno funkcionalnost, ki se uporablja v več aplikacijskih modulih, je najboljši način določiti osrednjo storitev s to funkcionalnostjo in jo nato vbrizgati kot odvisnost v vaše aplikacijske module.
Predmet vrednosti AngularJS lahko uporabite za vbrizgavanje preprostih predmetov JavaScript v krmilnik.
Servisni modul lahko uporabite za določanje vaših storitev po meri, ki jih je mogoče ponovno uporabiti v več modulih AngularJS.