Komponenty pro vkládání závislostí v AngularJS
James Hartman
⚡ Chytré shrnutí
V AngularJS předává komponentám objekty, na které se spoléhají, místo aby je samy vytvářely, takže kontrolery za běhu přijímají z frameworkového injectoru služby, jako je $http.
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í.
⚠️ Poznámka k verzi: Podpora AngularJS skončila v lednu 2022, bez bezpečnostních záplat. Moderní Angular injectuje prostřednictvím providerů @Injectable a vstřiknout()Níže uvedený kód zůstává historický.
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 zbytku tohoto tutoriálu se více podíváme na vkládání závislostí a na to, jak se to dělá v AngularJS.
Kterou komponentu lze v AngularJS vložit jako závislost?
V AngularJS se závislosti vkládají pomocí „vkládatelné tovární metody“ nebo „konstrukční funkce“.
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.
AngularJS modul registruje injekční objekty pomocí pěti receptur.
| Recept | Co registruje |
|---|---|
| hodnota | Připravený objekt, neviditelný pro konfigurační bloky |
| továrna | Funkce, jejíž návratová hodnota je vložena |
| servis | Konstruktor vytvořený jednou s new |
| Poskytovatel | Konfigurovatelný recept zpřístupňující $get |
| konstantní | Pevná hodnota čitelná v konfiguračních blocích |
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 AngularJS poté poskytne instanci služby $http našemu kontroleru k dalšímu zpracování.
Anotační formuláře: Implicitní anotace čte názvy parametrů, takže minifikace je přeruší. Inline array notace a $inject ji přežijí; ng-strict-di v ng-app odmítá implicitní anotaci.
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
Tato koncepce je založena na vytvoření jednoduchého JavaScénář objektu a jeho předání kontroleru 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 ho k hlavnímu modulu AngularJS.
Hodnotová složka nabývá dvou parametrů; jeden je klíč a druhý je hodnota JavaObjekt skriptu, který je vytvořen.
Krok 2) Vstoupit JavaObjekt skriptu z Kontroler AngularJS
<! 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>
Výše uvedený kód provádí následující kroky
-
sampleApp.value("TutorialID", 5);Funkce value modulu AngularJS se používá k vytvoření páru klíč-hodnota s názvem „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 jiné proměnné s názvem ID v $scope objekt. To se provádí proto, aby bylo možné předat hodnotu 5 z kontroleru do zobrazení.
-
{{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 AngularJS, která po vložení do vašich kontrolerů poskytuje potřebné funkce pro
( 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 service našeho hlavního modulu AngularJS.
-
this.ADDITION = function(a,b)
Zde vytváříme novou funkci s názvem ADDITION v rámci naší služby. To znamená, že když AngularJS vytvoří instanci naší služby AdditionService uvnitř našeho kontroleru, budeme moci přistupovat 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 sečte parametry a vrátí přidanou hodnotu.
-
mainApp.controller('DemoController', function($scope, AdditionService)
Toto je hlavní krok, který zahrnuje vkládání závislostí. V naší definici kontroleru nyní odkazujeme na naši službu „AdditionService“. Když AngularJS tuto informaci vidí, 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 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 kontroléru.
