Injekce závislostí v AngularJS s příkladem

Obsah:

Anonim

Co je Dependency Injection v AngularJS?

Dependency Injection je vzor návrhu softwaru, který implementuje inverzi řízení pro řešení závislostí.

Inverze kontroly : To znamená, že objekty nevytvářejí další objekty, na které se spoléhají při své práci. Místo toho tyto objekty získávají z vnějšího zdroje. To tvoří základ injekce závislostí, kde pokud je jeden objekt závislý na jiném; primární objekt nepřebírá odpovědnost za vytvoření závislého objektu a poté použije jeho metody. Místo toho externí zdroj (který v AngularJS je samotný rámec AngularJS) vytvoří závislý objekt a dá ho zdrojovému objektu pro další použití.

Pojďme tedy nejprve pochopit, co je to závislost.

Výše uvedený diagram ukazuje jednoduchý příklad každodenního rituálu v programování databáze.

  • Pole „Model“ zobrazuje „třídu modelu“, která je obvykle vytvořena pro interakci s databází. Nyní je tedy databáze závislostí fungování „třídy modelu“.
  • Vložením závislosti vytvoříme službu, která popadne všechny informace z databáze a dostane se do třídy modelu.

Ve zbývající části tohoto kurzu se podíváme více na vkládání závislostí a na to, jak se toho v AngularJS dosahuje.

V tomto výukovém programu se naučíte

  • Kterou komponentu lze vložit jako závislost v AngularJS
  • Příklad injekce závislostí
    • Hodnotová složka
    • Servis

Kterou komponentu lze vložit jako závislost v AngularJS

V Angular.JS jsou závislosti vkládány pomocí „injektovatelné tovární metody“ nebo „konstruktorové funkce“.

Tyto komponenty mohou být vloženy s komponentami „služby“ a „hodnoty“ jako závislosti. Viděli jsme to v dřívějším tématu se službou $ http.

Již jsme viděli, že službu $ http lze v rámci AngularJS použít k získání dat z databáze MySQL nebo MS SQL Server prostřednictvím webové aplikace PHP.

Služba $ http je obvykle definována z řadiče následujícím způsobem.

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

Nyní, když je služba $ http definována v ovladači, jak je uvedeno výše. To znamená, že ovladač má nyní závislost na službě $ http.

Když se tedy výše uvedený kód provede, AngularJS provede následující kroky;

  1. Zkontrolujte, zda byla vytvořena instance služby „$ http“. Jelikož náš „správce“ nyní závisí na „službě $ http“, je třeba, aby byl objekt této služby zpřístupněn našemu správci.
  2. Pokud AngularJS zjistí, že služba $ http není vytvořena, AngularJS použije k vytvoření objektu $ http funkci 'factory'.
  3. Injektor v rámci Angular.JS poté poskytuje instanci služby $ http našemu řadiči pro další zpracování.

Nyní, když je závislost vložena do našeho řadiče, můžeme nyní vyvolat nezbytné funkce ve službě $ http pro další zpracování.

Příklad injekce závislostí

Injekci závislostí lze implementovat dvěma způsoby

  1. Jeden je prostřednictvím „hodnotové komponenty“
  2. Další je prostřednictvím „služby“

Podívejme se na implementaci obou způsobů podrobněji.

1) Hodnotová složka

Tento koncept je založen na skutečnosti, že se vytvoří jednoduchý objekt JavaScriptu a předá se řadiči k dalšímu zpracování.

To je implementováno pomocí níže uvedených dvou kroků

Krok 1) Vytvořte objekt JavaScript pomocí komponenty value a připojte jej k hlavnímu modulu AngularJS.JS.

Hodnotová složka má dva parametry; jeden je klíč a druhý je hodnota vytvořeného objektu javascript.

Krok 2) Přistupujte k objektu JavaScript z řadiče Angular.JS

Event Registration


Guru99 Global Event

{{ID}}

Ve výše uvedeném příkladu kódu se provádějí níže uvedené hlavní kroky

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

Hodnotová funkce modulu Angular.JS JS se používá k vytvoření páru klíč – hodnota s názvem „TutorialID“ a hodnoty „5“.

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

Proměnná TutorialID se nyní stává přístupnou pro řadič jako funkční parametr.

  1.  $scope.ID =TutorialID;

Hodnota TutorialID, která je 5, je nyní přiřazena jiné proměnné zvané ID v objektu $ scope. Děje se tak, aby bylo možné z kontroleru do pohledu předat hodnotu 5.

  1. {{ID}}

Parametr ID se v zobrazení zobrazuje jako výraz. Takže výstup '5' bude zobrazen na stránce.

Po provedení výše uvedeného kódu se výstup zobrazí níže

2) Servis

Služba je definována jako samostatný objekt JavaScript, který se skládá ze sady funkcí, které chcete vystavit a vložit do svého řadiče.

Například „$ http“ je služba v Angular.JS, která po vložení do vašich řadičů poskytuje nezbytné funkce

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

Tyto funkce lze poté odpovídajícím způsobem vyvolat z vašeho ovladače.

Podívejme se na jednoduchý příklad, jak si můžete vytvořit vlastní službu. Chystáme se vytvořit jednoduchou službu přidání, která přidá dvě čísla.

Event Registration

Guru99 Global Event




Result: {{result}}

Ve výše uvedeném příkladu jsou provedeny následující kroky

  1.  mainApp.service('AdditionService', function()

Tady vytváříme novou službu nazvanou „AdditionService“ pomocí parametru služby našeho hlavního modulu AngularJS JS.

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

Zde v rámci naší služby vytváříme novou funkci nazvanou Přidání. To znamená, že když AngularJS vytvoří instanci naší AdditionService uvnitř našeho řadiče, měli bychom pak přístup k funkci „Add“. V této definici funkce říkáme, že tato funkce přijímá dva parametry, a a b.

  1.  return a+b;

Zde definujeme tělo naší funkce přidání, která jednoduše přidá parametry a vrátí přidanou hodnotu.

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

Toto je hlavní krok, který zahrnuje vkládání závislostí. V naší definici správce nyní odkazujeme na naši službu „AdditionService“. Když to AngularJS uvidí, vytvoří instanci objektu typu 'AdditionService.'

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

Nyní přistupujeme k funkci „Sčítání“, která je definována v naší službě, a přiřazujeme ji k objektu $ scope kontroleru.

Toto je jednoduchý příklad toho, jak můžeme definovat naši službu a vložit funkčnost této služby do našeho řadiče.

Souhrn:

  • Závislost Injection, jak název napovídá, je proces vkládání závislých funkcí do modulů za běhu.
  • Použití vkládání závislostí pomáhá mít více znovu použitelný kód. Pokud jste měli společné funkce, které se používají napříč více aplikačními moduly, nejlepším způsobem je definovat centrální službu s touto funkcí a poté tuto službu vložit jako závislost ve vašich aplikačních modulech.
  • Hodnotový objekt AngularJS lze použít k vložení jednoduchých objektů JavaScriptu do vašeho řadiče.
  • Modul služby lze použít k definování vlastních služeb, které lze znovu použít napříč více moduly AngularJS.