AngularJS-riippuvuusruiskutus: mitkä komponentit ruiskutetaan

Mikä on riippuvuusinjektio AngularJS:ssä?

Riippuvuusinjektio AngularJS:ssä on ohjelmistosuunnittelumalli, joka toteuttaa ohjauksen käänteisen riippuvuuden ratkaisemiseksi. Se päättää, kuinka komponentit säilyttävät riippuvuutensa. Sitä voidaan käyttää komponenttien määrittelyssä tai moduulin ajo- ja konfigurointilohkojen tarjoamisessa. Sen avulla voit tehdä komponenteista uudelleenkäytettäviä, testattavia ja ylläpidettäviä.

Ohjauksen käännös: Se tarkoittaa, että objektit eivät luo muita objekteja, joihin ne luottavat työssään. Sen sijaan he saavat nämä esineet ulkopuolisesta lähteestä. Tämä muodostaa perustan AngularJS-riippuvuusinjektiolle, jossa jos yksi objekti on riippuvainen toisesta; ensisijainen objekti ei ota vastuuta riippuvan objektin luomisesta ja sen menetelmien käyttämisestä. Sen sijaan ulkoinen lähde (joka AngularJS:ssä on itse AngularJS-kehys) luo riippuvaisen objektin ja antaa sen lähdeobjektille myöhempää käyttöä varten.

Ymmärrämme siis ensin mitä riippuvuus on.

Yllä oleva kaavio näyttää yksinkertaisen AngularJS-riippuvuuden lisäyksen esimerkin jokapäiväisestä rituaalista tietokantaohjelmoinnissa.

"Malli"-ruutu kuvaa "Malliluokkaa", joka yleensä luodaan vuorovaikutukseen tietokannan kanssa. Joten nyt tietokanta on "malliluokan" toiminnan riippuvuus.
Riippuvuusinjektion avulla luomme palvelun, joka nappaa kaikki tiedot tietokannasta ja päästä malliluokkaan.

Tämän opetusohjelman loppuosassa tarkastellaan enemmän riippuvuuden lisäämistä ja sitä, kuinka tämä tehdään AngularJS:ssä.

Mikä komponentti voidaan pistää riippuvuutena AngularJS:ään?

Angular.JS:ssä riippuvuudet lisätään käyttämällä "injektoitavaa tehdasmenetelmää" tai "konstruktorifunktiota".

Näihin komponentteihin voidaan lisätä "palvelu"- ja "arvo"-komponentteja riippuvuuksina. Olemme nähneet tämän aikaisemmassa aiheessa $http-palvelun kanssa.

Olemme jo nähneet, että $http-palvelua voidaan käyttää AngularJS:ssä tietojen saamiseksi a MySQL tai MS SQL Palvelintietokanta a PHP verkkosovellus.

$http-palvelu määritellään normaalisti ohjaimen sisältä seuraavalla tavalla.

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

Nyt kun $http-palvelu on määritelty ohjaimessa yllä olevan kuvan mukaisesti. Se tarkoittaa, että ohjain on nyt riippuvainen $http-palvelusta.

Joten kun yllä oleva koodi suoritetaan, AngularJS suorittaa seuraavat vaiheet;

Tarkista, onko "$http-palvelu" instantoitu. Koska "ohjain" on nyt riippuvainen "$http-palvelusta", tämän palvelun kohde on asetettava ohjaimemme saataville.
Jos AngularJS saa selville, että $http-palvelua ei ole instantoitu, AngularJS käyttää 'factory'-funktiota $http-objektin rakentamiseen.
Angular.JS:n injektori tarjoaa sitten $http-palvelun esiintymän ohjaimellemme jatkokäsittelyä varten.

Nyt kun riippuvuus on lisätty ohjaimeen, voimme nyt kutsua tarvittavat toiminnot $http-palvelussa jatkokäsittelyä varten.

Esimerkki riippuvuusruiskeesta

Tässä esimerkissä opimme käyttämään riippuvuusinjektiota AngularJS:ssä.

Riippuvuusinjektio voidaan toteuttaa kahdella tavalla

Yksi on "arvokomponentin" kautta
Toinen on "palvelun" kautta

Katsotaanpa molempien tapojen toteutusta yksityiskohtaisemmin.

1) Arvokomponentti

Tämä konsepti perustuu siihen, että luodaan yksinkertainen JavaKäsikirjoitus vastusta ja toimita se rekisterinpitäjälle jatkokäsittelyä varten.

Tämä toteutetaan käyttämällä alla olevia kahta vaihetta

Vaihe 1) Luo JavaKäsikirjoita objekti käyttämällä arvokomponenttia ja liitä se AngularJS.JS-päämoduuliisi.

Arvokomponentti saa kaksi parametria; yksi on avain ja toinen on luodun javascript-objektin arvo.

Vaihe 2) Kirjaudu JavaKäsikirjoitusobjekti kohteesta Angular.JS-ohjain

<! 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>

Yllä olevassa koodiesimerkissä suoritetaan alla olevia päävaiheita

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

Angular.JS JS -moduulin arvofunktiota käytetään luomaan avain-arvopari nimeltä "TutorialID" ja arvo "5".

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

TutorialID-muuttuja on nyt ohjaimen käytettävissä toimintoparametrina.

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

TutorialID:n arvo, joka on 5, on nyt määritetty toiselle muuttujalle nimeltä ID $scope-objektissa. Tämä tehdään niin, että arvo 5 voidaan siirtää ohjaimesta näkymään.

```
{{ID}}
```

ID-parametri näytetään näkymässä lausekkeena. Joten tulos '5' näkyy sivulla.

Kun yllä oleva koodi suoritetaan, tulos näytetään alla

2) Palvelu

Palvelu määritellään yksittäiseksi JavaKomentosarjaobjekti, joka koostuu joukosta toimintoja, jotka haluat paljastaa ja lisätä ohjaimeen.

Esimerkiksi "$http" on Angular.JS:n palvelu, joka syötettynä ohjaimiin tarjoaa tarvittavat toiminnot

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

Nämä toiminnot voidaan sitten kutsua ohjaimesta vastaavasti.

Katsotaanpa yksinkertaista esimerkkiä siitä, kuinka voit luoda oman palvelun. Aiomme luoda yksinkertaisen summauspalvelun, joka lisää kaksi numeroa.

<! 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>

Yllä olevassa esimerkissä suoritetaan seuraavat vaiheet

 mainApp.service('AdditionService', function()

Täällä luomme uuden palvelun nimeltä "AdditionService" käyttämällä AngularJS JS -päämoduulimme palveluparametria.

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

Täällä luomme palveluumme uuden toiminnon nimeltä Lisäys. Tämä tarkoittaa, että kun AngularJS instantoi AdditionService-palvelumme ohjaimessamme, voisimme sitten käyttää Addition-toimintoa. Tässä funktion määritelmässä sanomme, että tämä funktio hyväksyy kaksi parametria, a ja b.

```
 return a+b;
```

Tässä määrittelemme lisäysfunktiomme rungon, joka yksinkertaisesti lisää parametrit ja palauttaa lisäarvon.

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

Tämä on tärkein vaihe, johon liittyy riippuvuusruiske. Ohjaimen määrittelyssä viittaamme nyt AdditionService-palveluumme. Kun AngularJS näkee tämän, se instantoi AdditionService-tyypin objektin.

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

Käytämme nyt palvelussamme määritettyä toimintoa "Lisäys" ja määritämme sen ohjaimen $scope-objektille.

Tämä on siis yksinkertainen esimerkki siitä, kuinka voimme määritellä palvelumme ja lisätä palvelun toiminnallisuuden ohjaimemme sisään.

Yhteenveto

Dependency Injection, kuten nimestä voi päätellä, on prosessi, jossa riippuvaisia toimintoja lisätään moduuleihin ajon aikana.
Riippuvuuslisäyksen käyttäminen auttaa saamaan uudelleen käytettävän koodin. Jos sinulla oli yhteisiä toimintoja, joita käytetään useissa sovellusmoduuleissa, paras tapa on määrittää keskuspalvelu kyseisellä toiminnallisuudella ja lisätä palvelu sitten sovellusmoduuleihisi riippuvuutena.
AngularJS:n arvoobjektia voidaan käyttää yksinkertaisen lisäämiseen JavaKäsikirjoita ohjaimesi objektit käyttämällä $inject in angularjs.
Palvelumoduulia voidaan käyttää mukautettujen palveluiden määrittelemiseen, joita voidaan käyttää uudelleen useissa AngularJS-moduuleissa.