AngularJS-riippuvuuksien injektointikomponentit

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.

⚠️ Versiohuomautus: AngularJS-tuki päättyi tammikuussa 2022ilman tietoturvapäivityksiä. Modern Angular injektoi @Injectable-palveluntarjoajien kautta ja pistää()Alla oleva koodi pysyy historiallisena.

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 tutoriaalin loppuosassa tarkastelemme lisää riippuvuuksien injektointia ja sitä, miten se toteutetaan angularjs.

Mikä komponentti voidaan injektoida riippuvuutena AngularJS:ssä?

AngularJS:ssä riippuvuudet injektoidaan käyttämällä "injectable factory method" tai "constructor function".

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

AngularJS moduuli rekisteröi injektoitavat esineet viiden reseptin avulla.

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;

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

Merkintälomakkeet: Implisiittinen annotaatio lukee parametrien nimet, joten minimointi rikkoo sen. Sekä inline-taulukon merkintätapa että $inject säilyvät siinä; ng-strict-di ng-app-sovelluksessa hylkää implisiittisen annotoinnin.

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

1. Yksi on "arvokomponentin" kautta
2. Toinen on "palvelun" kautta

Katsotaanpa molempien tapojen toteutusta yksityiskohtaisemmin.

1) Arvokomponentti

Tämä konsepti perustuu yksinkertaisen luomiseen JavaKäsikirjoitus objekti ja välittää sen ohjaimelle jatkokäsittelyä varten.

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

Vaihe 1) Luo JavaScript-objekti käyttämällä value-komponenttia ja liitä se AngularJS-päämoduuliisi.

Arvokomponentti saa kaksi parametria; toinen on avain ja toinen on funktion arvo. JavaLuotava skriptiobjekti.

Vaihe 2) Kirjaudu JavaKäsikirjoitusobjekti kohteesta AngularJS-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ä oleva koodi suorittaa alla olevat vaiheet

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

   AngularJS-moduulin value-funktiota käytetään avain-arvo-parin nimeltä ”TutorialID” ja arvon ”5” luomiseen.

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

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

3.  $scope.ID =TutorialID;

   TutorialID:n arvo, joka on 5, annetaan nyt toiselle muuttujalle nimeltä ID kohdassa $laajuus objekti. Tämä tehdään, jotta arvo 5 voidaan välittää ohjaimelta näkymään.

4. {{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 AngularJS:n palvelu, joka ohjaimiin injektoituna 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

1.  mainApp.service('AdditionService', function()

   Tässä luomme uuden palvelun nimeltä 'AdditionService' käyttämällä pääasiallisen AngularJS-moduulimme palveluparametria.

2.  this.ADDITION = function(a,b)

   Tässä luomme uuden funktion nimeltä ADDITION palveluumme. Tämä tarkoittaa, että kun AngularJS luo AdditionService-instanssin ohjaimemme sisällä, voimme käyttää 'ADDITION'-funktiota. Tässä funktion määritelmässä sanomme, että tämä funktio hyväksyy kaksi parametria, a ja b.

3.  return a+b;

   Tässä määrittelemme yhteenlaskufunktion rungon, joka yksinkertaisesti laskee parametrit yhteen ja palauttaa lisätyn arvon.

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

   Tämä on päävaihe, johon liittyy riippuvuuksien injektointi. Ohjainmääritelmässämme viittaamme nyt 'AdditionService'-palveluumme. Kun AngularJS näkee tämän, se luo 'AdditionService'-tyyppisen objektin instanssin.

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

   Käytämme nyt palvelussamme määriteltyä funktiota 'ADDITION' 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.

UKK