AngularJS-i sõltuvuse süstimine: millised komponendid süstiti

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.

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 rohkem sõltuvuse süstimist ja seda, kuidas seda AngularJS-is tehakse.

Millist komponenti saab AngularJS-i sõltuvusena süstida?

Angular.JS-is sisestatakse sõltuvused "süstitava tehase meetodi" või "konstruktori funktsiooni" abil.

Nendele komponentidele saab sõltuvustena lisada teenuse- ja väärtuskomponente. Oleme seda näinud ühes varasemas $http teenuse teemas.

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 pakub Angular.JS-i pihusti meie kontrollerile edasiseks töötlemiseks $http teenuse eksemplari.

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 loomise faktil JavaScript vastutavale töötlejale edasiseks töötlemiseks.

Seda rakendatakse kahe alltoodud sammu abil

Step 1) Loo JavaSkriptige objekt väärtuskomponendi abil ja lisage see oma põhimoodulile AngularJS.JS.

Väärtuskomponent võtab kaks parameetrit; üks on võti ja teine loodava javascripti objekti väärtus.

Step 2) Juurdepääs JavaSkriptiobjekti Angular.JS 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 koodinäites viiakse läbi alltoodud peamised sammud

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

Mooduli Angular.JS JS väärtusfunktsiooni kasutatakse võtme-väärtuste paari "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 objektis $scope teisele muutujale nimega ID. Seda tehakse selleks, et väärtus 5 saaks kontrollerist vaatesse 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 "$http" on Angular.JS-i teenus, mis teie kontrolleritesse sisestatuna 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 JS-mooduli teenuseparameetrit.

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

Siin loome oma teenuses uue funktsiooni nimega Lisamine. See tähendab, et kui AngularJS loob meie kontrolleri sees AdditionService'i, pääseksime juurde funktsioonile Lisa. Selles funktsiooni definitsioonis ütleme, et see funktsioon aktsepteerib kahte parameetrit a ja b.

```
 return a+b;
```

Siin määratleme oma funktsiooni Lisamise põhiosa, mis lihtsalt lisab parameetrid ja tagastab lisandväärtuse.

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

See on peamine samm, mis hõlmab sõltuvuse süstimist. Oma kontrolleri määratluses viitame nüüd teenusele AdditionService. Kui AngularJS seda näeb, loob see objekti tüüpi 'AdditionService'.

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

Nüüd pääseme juurde meie teenuses määratletud funktsioonile 'Lisa' ja määrame selle kontrolleri objektile $scope.

Nii et see on lihtne näide sellest, kuidas saame oma teenust määratleda ja selle teenuse funktsionaalsust oma kontrollerisse sisestada.

kokkuvõte

Sõltuvuste sisestamine, nagu nimigi viitab, on sõltuvate funktsioonide sisestamine moodulitesse käitusajal.
Sõltuvussüsti kasutamine aitab saada korduvkasutatavat koodi. Kui teil oli ühine funktsioon, mida kasutatakse mitmes rakendusemoodulis, on parim viis määratleda selle funktsiooniga keskteenus ja seejärel sisestada see teenus oma rakendusmoodulitesse sõltuvusena.
AngularJS-i väärtusobjekti saab kasutada lihtsa sisestamiseks JavaSkripti objektid kontrolleris kasutades $inject in AngularJS.
Teenindusmoodulit saab kasutada kohandatud teenuste määratlemiseks, mida saab mitmes AngularJS-moodulis uuesti kasutada.