Injekcia závislostí v AngularJS s príkladom

Čo je závislé vstrekovanie v AngularJS?

Dependency Injection je vzor návrhu softvéru, ktorý implementuje inverziu riadenia na riešenie závislostí.

Inverzia kontroly : To znamená, že objekty nevytvárajú ďalšie objekty, na ktoré sa spoliehajú pri svojej práci. Namiesto toho tieto objekty získavajú z vonkajšieho zdroja. To tvorí základ injekcie závislostí, keď je jeden objekt závislý na druhom; primárny objekt nepreberá zodpovednosť za vytvorenie závislého objektu a potom použije jeho metódy. Namiesto toho externý zdroj (ktorým je v AngularJS samotný rámec AngularJS) vytvorí závislý objekt a dá ho zdrojovému objektu na ďalšie použitie.

Poďme si teda najskôr uvedomiť, čo je závislosť.

Vyššie uvedený diagram zobrazuje jednoduchý príklad každodenného rituálu v programovaní databázy.

Políčko „Model“ zobrazuje „triedu modelu“, ktorá sa zvyčajne vytvára na interakciu s databázou. Takže teraz je databáza závislosťou fungovania „modelovej triedy“.
Injekciou závislostí vytvoríme službu, ktorá zachytí všetky informácie z databázy a dostane sa do modelovej triedy.

Vo zvyšku tohto tutoriálu sa pozrieme viac na vkladanie závislostí a na to, ako sa to v AngularJS dosahuje.

V tomto návode sa naučíte

Ktorý komponent je možné vložiť ako závislosť v AngularJS
Príklad injekcie závislostí

Hodnotová zložka
Služby

Ktorý komponent je možné vložiť ako závislosť v AngularJS

V Angular.JS sú závislosti vkladané pomocou „injektovateľnej továrenskej metódy“ alebo „funkcie konštruktora“.

Do týchto komponentov je možné vložiť komponenty „servis“ a „hodnota“ ako závislosti. Videli sme to v staršej téme so službou $ http.

Už sme videli, že službu $ http je možné v rámci AngularJS použiť na získanie údajov z databázy MySQL alebo MS SQL Server prostredníctvom webovej aplikácie PHP.

Služba $ http je zvyčajne definovaná z radiča nasledujúcim spôsobom.

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

Teraz, keď je služba $ http definovaná v ovládači, ako je uvedené vyššie. To znamená, že radič má teraz závislosť od služby $ http.

Keď sa teda vyššie uvedený kód vykoná, vykoná AngularJS nasledujúce kroky;

Skontrolujte, či došlo k vytvoreniu inštancie „služby $ http“. Pretože náš „kontrolór“ teraz závisí od „služby $ http“, je potrebné objekt tejto služby sprístupniť nášmu kontrolórovi.
Ak AngularJS zistí, že služba $ http nie je inštanovaná, použije AngularJS na vytvorenie objektu $ http funkciu 'factory'.
Injektor v rámci Angular.JS potom poskytuje inštanciu služby $ http nášmu kontrolórovi na ďalšie spracovanie.

Teraz, keď je závislosť vložená do nášho radiča, môžeme teraz vyvolať potrebné funkcie v rámci služby $ http na ďalšie spracovanie.

Príklad injekcie závislostí

Injekciu závislostí je možné implementovať dvoma spôsobmi

Jeden je prostredníctvom „hodnotovej zložky“
Ďalšia je prostredníctvom „služby“

Pozrime sa na implementáciu oboch spôsobov podrobnejšie.

1) Hodnotová zložka

Tento koncept je založený na skutočnosti, že je potrebné vytvoriť jednoduchý objekt JavaScriptu a odovzdať ho kontrolóru na ďalšie spracovanie.

To sa implementuje pomocou nasledujúcich dvoch krokov

Krok 1) Vytvorte objekt JavaScript pomocou komponentu value a pripojte ho k svojmu hlavnému modulu AngularJS.JS.

Hodnotová zložka má dva parametre; jeden je kľúč a druhý je hodnota vytvoreného objektu javascript.

Krok 2) Prístup k objektu JavaScript z ovládača Angular.JS

Event Registration
Guru99 Global Event
{{ID}}

Vo vyššie uvedenom príklade kódu sa vykonávajú nižšie uvedené hlavné kroky

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

Hodnotová funkcia modulu Angular.JS JS sa používa na vytvorenie páru kľúč - hodnota s názvom „TutorialID“ a hodnoty „5“.

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

Premenná TutorialID sa teraz stáva prístupnou pre radič ako funkčný parameter.

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

Hodnota TutorialID, ktorá je 5, sa teraz priraďuje k inej premennej s názvom ID v objekte $ scope. Toto sa deje tak, že z kontroléra do pohľadu sa dá preniesť hodnota 5.

```
{{ID}}
```

Parameter ID sa v zobrazení zobrazuje ako výraz. Takže výstup '5' sa zobrazí na stránke.

Keď sa vykoná vyššie uvedený kód, výstup sa zobrazí nižšie

2) Služba

Služba je definovaná ako samostatný objekt JavaScript, ktorý sa skladá zo sady funkcií, ktoré chcete vystaviť a vložiť do vášho radiča.

Napríklad „$ http“ je služba v Angular.JS, ktorá po vstreknutí do vašich ovládačov poskytuje potrebné funkcie

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

Tieto funkcie je možné následne zodpovedajúcim spôsobom vyvolať z vášho ovládača.

Pozrime sa na jednoduchý príklad toho, ako si môžete vytvoriť svoju vlastnú službu. Chystáme sa vytvoriť jednoduchú službu sčítania, ktorá pridá dve čísla.

Event Registration
Guru99 Global Event

Result: {{result}}

Vo vyššie uvedenom príklade sa uskutočňujú nasledujúce kroky

 mainApp.service('AdditionService', function()

Tu vytvárame novú službu s názvom „AdditionService“ pomocou parametra služby nášho hlavného modulu AngularJS JS.

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

Tu v rámci našej služby vytvárame novú funkciu s názvom Dodatok. To znamená, že keď AngularJS vytvorí inštanciu našej služby AddService vo vnútri nášho radiča, budeme mať prístup k funkcii „Add“. V tejto definícii funkcie hovoríme, že táto funkcia prijíma dva parametre, a a b.

```
 return a+b; 
```

Tu definujeme telo našej funkcie sčítania, ktorá jednoducho pridá parametre a vráti pridanú hodnotu.

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

Toto je hlavný krok, ktorý zahŕňa zavedenie závislosti. V našej definícii správcu teraz odkazujeme na našu službu „AdditionService“. Keď to AngularJS uvidí, vytvorí inštanciu objektu typu „AdditionService“.

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

Teraz pristupujeme k funkcii „Dodatok“, ktorá je definovaná v našej službe, a priraďujeme ju k objektu $ scope radiča.

Toto je jednoduchý príklad toho, ako môžeme definovať našu službu a vložiť funkčnosť tejto služby do nášho kontrolóra.

Zhrnutie:

Závislosť Injection, ako už z názvu vyplýva, je proces vkladania závislých funkcií do modulov za behu.
Použitie vkladania závislostí pomáha pri získaní znovu použiteľného kódu. Ak ste mali spoločné funkcie, ktoré sa používajú vo viacerých aplikačných moduloch, najlepším spôsobom je definovať centrálnu službu s touto funkčnosťou a potom túto službu vložiť ako závislosť do svojich aplikačných modulov.
Hodnotový objekt AngularJS možno použiť na vloženie jednoduchých objektov JavaScript do vášho radiča.
Servisný modul možno použiť na definovanie vašich vlastných služieb, ktoré je možné znova použiť vo viacerých moduloch AngularJS.