AngularJS sõltuvuste süstimise komponendid
James Hartman
⚡ Nutikas kokkuvõte
AngularJS-i sõltuvusinjektsioon annab komponentidele objektid, millele nad toetuvad, selle asemel, et lasta neil endil neid objekte ehitada, seega saavad kontrollerid käitusajal raamistiku injektorilt selliseid teenuseid nagu $http.
Mis on sõltuvuse süstimine AngularJS-is?
Sõltuvuse süstimine AngularJS-is on tarkvara kujundusmuster, mis rakendab sõltuvuste lahendamiseks juhtimise ümberpööramist. See otsustab, kuidas komponendid oma sõltuvusi säilitavad. Seda saab kasutada komponentide määratlemisel või mooduli käitamis- ja konfigureerimisplokkide pakkumisel. See võimaldab teil muuta komponendid korduvkasutatavaks, testitavaks ja hooldatavaks.
Kontrolli ümberpööramine: See tähendab, et objektid ei loo muid objekte, millele nad oma töö tegemisel tuginevad. Selle asemel saavad nad need objektid välisest allikast. See on AngularJS-i sõltuvuse süstimise aluseks, kus üks objekt sõltub teisest; esmane objekt ei võta endale vastutust sõltuva objekti loomise ja seejärel selle meetodite kasutamise eest. Selle asemel loob väline allikas (mis AngularJS-is on AngularJS-i raamistik ise) sõltuva objekti ja annab selle lähteobjektile edasiseks kasutamiseks.
⚠️ Versiooni märkus: AngularJS tugi lõppes jaanuaris 2022ilma turvapaikadeta. Modern Angular süstib @Injectable pakkujate kaudu ja süsti()Allolev kood jääb ajalooliseks.
Nii et kõigepealt mõistame, mis on sõltuvus.
Ülaltoodud diagramm näitab lihtsat AngularJS-i sõltuvuse süstimise näidet igapäevasest rituaalist andmebaasi programmeerimisel.
- Kast „Mudel” kujutab mudeliklassi, mis tavaliselt luuakse andmebaasiga suhtlemiseks. Nii et nüüd on andmebaas "mudelklassi" toimimise sõltuvus.
- Sõltuvussüsti abil loome teenuse andmebaasist kogu teabe haaramiseks ja mudeliklassi sisenemiseks.
Selle õpetuse ülejäänud osas vaatleme lähemalt sõltuvussüstimist ja seda, kuidas seda tehakse AngularJS.
Millist komponenti saab AngularJS-i sõltuvusena süstida?
AngularJS-is süstitakse sõltuvusi „süstitava tehasemeetodi” või „konstruktorifunktsiooni” abil.
Nendele komponentidele saab sõltuvustena lisada teenuse- ja väärtuskomponente. Oleme seda näinud ühes varasemas $http teenuse teemas.
AngularJS moodul registreerib süstitavaid objekte viie retsepti abil.
| Retsept | Mida see registreerib |
|---|---|
| väärtus | Valmis objekt, mis on konfiguratsiooniplokkidele nähtamatu |
| tehas | Funktsioon, mille tagastusväärtus süstitakse |
| teenus | Konstruktor, mis on loodud üks kord uuega |
| tarnija | Konfigureeritav retsept, mis paljastab $get funktsiooni |
| pidev | Fikseeritud väärtus, mida saab lugeda konfiguratsiooniplokkidest |
Oleme juba näinud, et $http teenust saab kasutada AngularJS-is andmete hankimiseks a MySQL või MS SQL Serveri andmebaas a PHP veebirakendus.
$http teenus määratletakse tavaliselt kontrollerist järgmisel viisil.
sampleApp.controller ('AngularJSController', function ($scope, $http)
Nüüd, kui $http teenus on kontrolleris määratletud, nagu ülal näidatud. See tähendab, et kontroller on nüüd sõltuvuses $http teenusest.
Nii et kui ülaltoodud kood käivitatakse, teeb AngularJS järgmised toimingud;
- Kontrollige, kas "$http-teenus" on loodud. Kuna meie “kontroller” sõltub nüüd “$http teenusest”, tuleb selle teenuse objekt meie kontrollerile kättesaadavaks teha.
- Kui AngularJS avastab, et $http-teenust pole instantseeritud, kasutab AngularJS $http-objekti konstrueerimiseks tehasefunktsiooni.
- Seejärel annab AngularJS-i injektor meie kontrollerile edasiseks töötlemiseks $http teenuse eksemplari.
Märkuste vormid: Kaudne märkus Loeb parameetrite nimesid, seega minimeerimine rikub selle. Nii reasisese massiivi märge kui ka $inject jäävad sellesse alles; ng-strict-di ng-app-is lükkab tagasi kaudse annotatsiooni.
Nüüd, kui sõltuvus on meie kontrollerisse sisestatud, saame edasiseks töötlemiseks käivitada vajalikud funktsioonid teenuses $http.
Näide sõltuvuse süstimisest
Selles näites õpime kasutama sõltuvuse süstimist AngularJS-is.
Sõltuvussüsti saab rakendada kahel viisil
- Üks on "väärtuskomponendi" kaudu
- Teine on "teenuse" kaudu
Vaatame mõlema meetodi rakendamist üksikasjalikumalt.
1) Väärtuskomponent
See kontseptsioon põhineb lihtsa loomisel JavaScript objekt ja edastab selle kontrollerile edasiseks töötlemiseks.
Seda rakendatakse kahe alltoodud sammu abil
Step 1) Loo JavaSkriptiobjekt väärtuskomponendi abil ja lisa see oma peamisele AngularJS moodulile.
Väärtuse komponent võtab kaks parameetrit; üks on võti ja teine on objekti väärtus. JavaLoodud skriptiobjekt.
Step 2) Juurdepääs JavaSkriptiobjekti AngularJS kontroller
<! 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>
Ülaltoodud kood teostab alltoodud samme
-
sampleApp.value("TutorialID", 5);AngularJS mooduli väärtusfunktsiooni kasutatakse võtme-väärtuse paari nimega „TutorialID“ ja väärtuse „5“ loomiseks.
-
sampleApp.controller('AngularJSController', function ($scope,TutorialID)
Muutuja TutorialID muutub nüüd kontrollerile funktsiooniparameetrina juurdepääsetavaks.
-
$scope.ID =TutorialID;
TutorialID väärtus, mis on 5, määratakse nüüd teisele muutujale nimega ID tabelis. ulatus objekt. Seda tehakse selleks, et väärtus 5 saaks kontrollerilt vaatele edastada.
-
{{ID}}ID parameetrit kuvatakse vaates avaldisena. Nii kuvatakse lehel väljund "5".
Kui ülaltoodud kood on käivitatud, kuvatakse väljund järgmiselt
2) teenus
Teenus on määratletud kui üksik JavaSkriptiobjekt, mis koosneb funktsioonide komplektist, mida soovite oma kontrollerisse paljastada ja sisestada.
Näiteks on „$http” AngularJS-i teenus, mis kontrolleritesse süstimisel pakub vajalikke funktsioone.
( get() , query() , save() , remove(), delete() ).
Neid funktsioone saab seejärel vastavalt kontrollerist välja kutsuda.
Vaatame lihtsat näidet selle kohta, kuidas saate luua oma teenuse. Loome lihtsa liitmisteenuse, mis lisab kaks numbrit.
<! 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>
Ülaltoodud näites viiakse läbi järgmised sammud
-
mainApp.service('AdditionService', function()
Siin loome uue teenuse nimega 'AdditionService', kasutades meie peamise AngularJS mooduli service parameetrit.
-
this.ADDITION = function(a,b)
Siin loome oma teenuse sees uue funktsiooni nimega ADDITION. See tähendab, et kui AngularJS loob meie kontrolleri sees AdditionService'i eksemplari, saame ligi pääseda funktsioonile 'ADDITION'. Selles funktsiooni definitsioonis ütleme, et see funktsioon aktsepteerib kahte parameetrit, a ja b.
-
return a+b;Siin defineerime oma LIITMISfunktsiooni põhiosa, mis lihtsalt liidab parameetrid ja tagastab lisatud väärtuse.
-
mainApp.controller('DemoController', function($scope, AdditionService)
See on peamine samm, mis hõlmab sõltuvuse süstimist. Meie kontrolleri definitsioonis viitame nüüd oma teenusele 'AdditionService'. Kui AngularJS seda näeb, loob see 'AdditionService' tüüpi objekti eksemplari.
-
$scope.result = AdditionService.ADDITION(5,6);
Nüüd pääseme ligi meie teenuses defineeritud funktsioonile 'ADDITION' ja määrame selle kontrolleri $scope objektile.
Nii et see on lihtne näide sellest, kuidas saame oma teenust määratleda ja selle teenuse funktsionaalsust oma kontrollerisse sisestada.
