Injekcija ovisnosti u AngularJS s primjerom

Što je ubrizgavanje ovisnosti u AngularJS?

Injekcija ovisnosti je obrazac softverskog dizajna koji implementira inverziju kontrole za rješavanje ovisnosti.

Inverzija kontrole : To znači da objekti ne stvaraju druge predmete na kojima se oslanjaju da rade svoj posao. Umjesto toga, te predmete dobivaju iz vanjskog izvora. To čini osnovu ubrizgavanja ovisnosti, ako je jedan objekt ovisan o drugom; primarni objekt ne preuzima odgovornost za stvaranje ovisnog objekta, a zatim koristi njegove metode. Umjesto toga, vanjski izvor (koji je u AngularJS-u sam AngularJS okvir) stvara ovisni objekt i daje ga izvornom objektu za daljnju upotrebu.

Pa prvo shvatimo što je ovisnost.

Gornji dijagram prikazuje jednostavan primjer svakodnevnog rituala u programiranju baza podataka.

Okvir 'Model' prikazuje "Klasu modela" koja je obično stvorena za interakciju s bazom podataka. Dakle, sada je baza podataka ovisnost za funkcioniranje "klase modela".
Ubrizgavanjem ovisnosti izrađujemo uslugu za prikupljanje svih podataka iz baze podataka i ulazak u klasu modela.

U ostatku ovog vodiča više ćemo pogledati ubrizgavanje ovisnosti i kako se to postiže u AngularJS-u.

U ovom vodiču naučit ćete-

Koja se komponenta može ubrizgati kao ovisnost u AngularJS
Primjer ubrizgavanja ovisnosti

Vrijednosna komponenta
Servis

Koja se komponenta može ubrizgati kao ovisnost u AngularJS

U Angular.JS, ovisnosti se ubrizgavaju pomoću "tvorničke metode za ubrizgavanje" ili "funkcije konstruktora".

Te se komponente mogu ubrizgati s komponentama "usluga" i "vrijednost" kao ovisnosti. To smo vidjeli u ranijoj temi s uslugom $ http.

Već smo vidjeli da se usluga $ http može koristiti u programu AngularJS za dobivanje podataka iz baze podataka MySQL ili MS SQL Server putem PHP web aplikacije.

Usluga $ http obično se definira unutar kontrolera na sljedeći način.

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

Sad kad je $ http usluga definirana u kontroleru kao što je gore prikazano. To znači da kontroler sada ovisi o usluzi $ http.

Dakle, kada se izvrši gornji kod, AngularJS će izvršiti sljedeće korake;

Provjerite je li instanca pokrenuta "$ http usluga". Budući da naš "kontrolor" sada ovisi o "$ http usluzi", objekt ove usluge mora biti dostupan našem kontroloru.
Ako AngularJS otkrije da usluga $ http nije instancirana, AngularJS koristi funkciju 'tvornica' za konstrukciju $ http objekta.
Injektor unutar Angular.JS zatim pruža primjerak usluge $ http našem kontroleru za daljnju obradu.

Sada kada se ovisnost ubrizgava u naš kontroler, sada možemo pozvati potrebne funkcije unutar $ http usluge za daljnju obradu.

Primjer ubrizgavanja ovisnosti

Injekcija ovisnosti može se provesti na 2 načina

Jedan je kroz "Vrijednosnu komponentu"
Drugi je putem "Usluge"

Pogledajmo provedbu oba načina detaljnije.

1) Vrijednosna komponenta

Ovaj se koncept temelji na činjenici stvaranja jednostavnog JavaScript objekta i prosljeđivanja kontroloru na daljnju obradu.

To se provodi u sljedeća dva koraka

Korak 1) Stvorite JavaScript objekt pomoću komponente vrijednosti i priložite ga glavnom modulu AngularJS.JS.

Vrijednosna komponenta poprima dva parametra; jedan je ključ, a drugi vrijednost javascript objekta koji je stvoren.

Korak 2) Pristupite JavaScript objektu iz kontrolera Angular.JS

Event Registration
Guru99 Global Event
{{ID}}

U gornjem primjeru koda provode se glavni koraci u nastavku

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

Vrijednosna funkcija modula Angular.JS JS koristi se za stvaranje para ključ / vrijednost pod nazivom "TutorialID" i vrijednosti "5".

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

Varijabla TutorialID sada postaje dostupna kontroleru kao parametar funkcije.

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

Vrijednost TutorialID-a, koja je 5, sada se dodjeljuje drugoj varijabli koja se naziva ID u objektu $ scope. To se radi kako bi se vrijednost 5 mogla prenijeti iz kontrolera u pogled.

```
{{ISKAZNICA}}
```

Parametar ID prikazuje se u prikazu kao izraz. Tako će se na stranici prikazati izlaz '5'.

Kada se izvrši gornji kod, izlaz će biti prikazan kao dolje

2) Usluga

Usluga je definirana kao jednokratni JavaScript objekt koji se sastoji od skupa funkcija koje želite izložiti i ubrizgati u vaš kontroler.

Na primjer, "$ http" je usluga u Angular.JS koja kada se ubrizga u vaše kontrolere pruža potrebne funkcije

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

Tada se te funkcije u skladu s tim mogu pozvati iz vašeg kontrolera.

Pogledajmo jednostavan primjer kako možete stvoriti vlastitu uslugu. Stvorit ćemo jednostavnu uslugu zbrajanja koja dodaje dva broja.

Event Registration
Guru99 Global Event

Result: {{result}}

U gornjem primjeru provode se sljedeći koraci

 mainApp.service('AdditionService', function()

Ovdje stvaramo novu uslugu koja se naziva 'AdditionService' koristeći parametar usluge našeg glavnog AngularJS JS modula.

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

Ovdje stvaramo novu funkciju zvanu Dodatak u našoj usluzi. To znači da bismo, kada AngularJS instantira našu AdditionService unutar našeg kontrolera, tada mogli pristupiti funkciji 'Dodavanje'. U ovoj definiciji funkcije kažemo da ova funkcija prihvaća dva parametra, a i b.

```
 return a+b; 
```

Ovdje definiramo tijelo naše funkcije Dodavanja koja jednostavno dodaje parametre i vraća dodanu vrijednost.

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

Ovo je glavni korak koji uključuje injekciju ovisnosti. U našoj definiciji kontrolera, sada se pozivamo na našu uslugu 'AdditionService'. Kada AngularJS vidi ovo, instancirat će objekt tipa 'AdditionService.'

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

Sada pristupamo funkciji 'Dodavanje' koja je definirana u našoj usluzi i dodjeljujemo je $ range objektu kontrolera.

Dakle, ovo je jednostavan primjer kako možemo definirati svoju uslugu i ubrizgati funkcionalnost te usluge unutar našeg kontrolera.

Sažetak:

Ubrizgavanje ovisnosti kao što naziv govori postupak je ubrizgavanja ovisne funkcionalnosti u module u vrijeme izvođenja.
Korištenje ubrizgavanja ovisnosti pomaže u dobivanju višekratnog koda. Ako ste imali zajedničku funkcionalnost koja se koristi u više aplikacijskih modula, najbolji način je definirati središnju uslugu s tom funkcionalnošću, a zatim ubrizgati tu uslugu kao ovisnost u vaše aplikacijske module.
Objekt vrijednosti AngularJS može se koristiti za ubrizgavanje jednostavnih JavaScript objekata u vaš kontroler.
Servisni modul može se koristiti za definiranje vaših prilagođenih usluga koje se mogu ponovno koristiti u više modula AngularJS.