AngularJS Dependency Injection: Které komponenty byly injektovány

Co je Dependency Injection v AngularJS?

Vstřikování závislosti v AngularJS je softwarový návrhový vzor, který implementuje inverzi řízení pro řešení závislostí. Rozhoduje, jak si komponenty udrží své závislosti. Může být použit při definování komponent nebo poskytování run a konfiguračních bloků modulu. Umožňuje vám zajistit, aby součásti byly opakovaně použitelné, testovatelné a udržovatelné.

Inverze ovládání: Znamená to, že objekty nevytvářejí jiné objekty, na kterých se spoléhají při své práci. Místo toho získávají tyto objekty z vnějšího zdroje. To tvoří základ AngularJS Dependency Injection, kde pokud je jeden objekt závislý na druhém; primární objekt nepřebírá odpovědnost za vytvoření závislého objektu a následné použití jeho metod. Místo toho externí zdroj (což je v AngularJS samotný rámec AngularJS) vytvoří závislý objekt a předá jej zdrojovému objektu pro další použití.

Nejprve si tedy ujasněme, co je to závislost.

Výše uvedený diagram ukazuje jednoduchý příklad injekce závislosti AngularJS každodenního rituálu v databázovém programování.

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

Ve zbývající části tohoto tutoriálu se podíváme více na vkládání závislostí a na to, jak je toho dosaženo v AngularJS.

Která komponenta může být injektována jako závislost v AngularJS?

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

Tyto komponenty mohou být vloženy s komponentami „service“ a „value“ 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 použít v rámci AngularJS k získání dat z a MySQL nebo MS SQL Databáze serveru přes a PHP webová aplikace.

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

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

Nyní, když je v ovladači definována služba $http, jak je uvedeno výše. Znamená to, že řadič je nyní závislý na službě $http.

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

Zkontrolujte, zda byla vytvořena instance „služby $http“. Vzhledem k tomu, že náš „řadič“ nyní závisí na službě „$http“, objekt této služby musí být našemu správci zpřístupněn.
Pokud AngularJS zjistí, že služba $http není vytvořena, použije AngularJS funkci 'factory' k vytvoření objektu $http.
Injektor v rámci Angular.JS pak poskytuje instanci služby $http našemu kontroléru k dalšímu zpracování.

Nyní, když je závislost vložena do našeho ovladače, můžeme nyní vyvolat potřebné funkce v rámci služby $http pro další zpracování.

Příklad Dependency Injection

V tomto příkladu se naučíme, jak používat v AngularJS vkládání závislostí.

Dependency injection lze implementovat 2 způsoby

Jedním z nich je „hodnotová složka“
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 vytvoření jednoduchého JavaScénář vznést námitku a předat ji správci k dalšímu zpracování.

To se provádí pomocí níže uvedených dvou kroků

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

Hodnotová složka nabývá dvou parametrů; jeden je klíč a druhý je hodnota objektu javascript, který je vytvořen.

Krok 2) Vstoupit JavaObjekt skriptu z Ovladač Angular.JS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

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

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

Funkce value modulu Angular.JS JS se používá k vytvoření páru klíč-hodnota nazvaného „TutorialID“ a hodnoty „5“.

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

Proměnná TutorialID se nyní stane přístupnou řídicímu systému jako parametr funkce.

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

Hodnota TutorialID, která je 5, je nyní přiřazena k jiné proměnné s názvem ID v objektu $scope. To se provádí tak, aby hodnota 5 mohla být předána z ovladače do pohledu.

```
{{ID}}
```

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

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

2) Služba

Služba je definována jako singleton JavaObjekt skriptu sestávající ze sady funkcí, které chcete vystavit a vložit do vašeho ovladače.

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

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

Tyto funkce lze následně vyvolat z vašeho ovladače.

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

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

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

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

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

 mainApp.service('AdditionService', function()

Zde vytváříme novou službu s názvem 'AdditionService' pomocí parametru služby našeho hlavního modulu AngularJS JS.

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

Zde v rámci naší služby vytváříme novou funkci s názvem Addition. To znamená, že když AngularJS vytvoří instanci naší AdditionService uvnitř našeho ovladače, budeme mít přístup k funkci 'Addition'. V této definici funkce říkáme, že tato funkce přijímá dva parametry, a a b.

```
 return a+b;
```

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

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

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

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

Nyní přistupujeme k funkci 'Addition', která je definována v naší službě, a přiřazujeme ji k objektu $scope ovladače.

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 kontroléru.

Shrnutí

Dependency 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á získat více znovu použitelný kód. Pokud jste měli společnou funkcionalitu, která se používá ve více aplikačních modulech, nejlepším způsobem je definovat centrální službu s touto funkčností a poté tuto službu vložit jako závislost do vašich aplikačních modulů.
Hodnotový objekt AngularJS lze použít k jednoduché injekci JavaSkriptujte objekty ve vašem ovladači pomocí $inject in AngularJS.
Servisní modul lze použít k definování vašich vlastních služeb, které lze znovu použít ve více modulech AngularJS.