Függőségi injekció AngularJS-ben példával

Tartalomjegyzék:

Anonim

Mi az a függőségi injekció az AngularJS-ben?

A Dependency Injection egy szoftvertervezési minta, amely végrehajtja a vezérlés inverzióját a függőségek feloldása érdekében.

A vezérlés inverziója : Ez azt jelenti, hogy az objektumok nem hoznak létre más objektumokat, amelyekre támaszkodnak munkájuk elvégzéséhez. Ehelyett ezeket az objektumokat külső forrásból szerzik be. Ez képezi a függőség-injektálás alapját, ahol ha az egyik objektum függ a másiktól; az elsődleges objektum nem vállal felelősséget a függő objektum létrehozásáért, majd használja annak módszereit. Ehelyett egy külső forrás (amely az AngularJS-ben maga az AngularJS keretrendszer) létrehozza a függő objektumot, és továbbadja a forrás objektumnak további felhasználásra.

Tehát először értsük meg, mi a függőség.

A fenti ábra egyszerű példát mutat be az adatbázis programozás mindennapi rituáléjára.

  • A "Modell" mező a "Modell osztályt" ábrázolja, amelyet általában az adatbázissal való együttműködés céljából hoznak létre. Tehát most az adatbázis függ a "Model class" működésétől.
  • Függőség-injektálással létrehozunk egy szolgáltatást, amely az adatbázis összes információját lekapja és a modellosztályba kerül.

Az oktatóanyag további részében többet fogunk megvizsgálni a függőség-injektáláson és annak megvalósításán az AngularJS-ben.

Ebben az oktatóanyagban megtanulja-

  • Melyik összetevőt lehet injektálni függőségként az AngularJS-ben
  • Példa a függőség injekciójára
    • Értékkomponens
    • Szolgáltatás

Melyik összetevőt lehet injektálni függőségként az AngularJS-ben

Az Angular.JS fájlban a függőségeket "injektálható gyári módszerrel" vagy "konstruktor funkcióval" injektálják.

Ezeket az összetevőket "service" és "value" komponensekkel injektálhatjuk függőségként. Láttuk ezt egy korábbi témában a $ http szolgáltatással.

Láttuk már, hogy a $ http szolgáltatás használható az AngularJS-en belül adatok megszerzésére egy MySQL vagy MS SQL Server adatbázisból egy PHP webalkalmazáson keresztül.

A $ http szolgáltatást általában a vezérlőn belül határozzák meg a következő módon.

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

Most, amikor a $ http szolgáltatást a vezérlő definiálja, a fentiek szerint. Ez azt jelenti, hogy a vezérlő most függ a $ http szolgáltatástól.

Tehát amikor a fenti kód végrehajtásra kerül, az AngularJS a következő lépéseket hajtja végre;

  1. Ellenőrizze, hogy a "$ http szolgáltatás" példányos-e. Mivel a "vezérlőnk" most a "$ http szolgáltatástól függ", ennek a szolgáltatásnak egy objektumát elérhetővé kell tenni a vezérlőnk számára.
  2. Ha az AngularJS megtudja, hogy a $ http szolgáltatás nincs példányosítva, az AngularJS a 'gyári' függvényt használja egy $ http objektum létrehozásához.
  3. Az Angular.JS-n belüli injektor ezután a $ http szolgáltatás egy példányát biztosítja vezérlőnknek további feldolgozás céljából.

Most, hogy a függőséget beinjekcióztuk a vezérlőnkbe, most további feldolgozás céljából meghívhatjuk a $ http szolgáltatáson belül a szükséges funkciókat.

Példa a függőség injekciójára

A függőség-injektálás kétféleképpen valósítható meg

  1. Az egyik az "Értékkomponensen" keresztül történik
  2. A másik egy "szolgáltatás" révén történik

Nézzük meg részletesebben mindkét módszer megvalósítását.

1) Értékkomponens

Ez a koncepció egy egyszerű JavaScript objektum létrehozásának tényén alapul, és továbbítja azt a vezérlőnek további feldolgozás céljából.

Ez az alábbi két lépés segítségével valósul meg

1. lépés: Hozzon létre egy JavaScript objektumot az értékkomponens használatával, és csatolja a fő AngularJS.JS modulhoz.

Az értékkomponens két paramétert vesz fel; az egyik a kulcs, a másik pedig a létrehozott javascript objektum értéke.

2. lépés : Az Angular.JS vezérlőből érje el a JavaScript objektumot

Event Registration


Guru99 Global Event

{{ID}}

A fenti kód példában az alábbi fő lépéseket hajtjuk végre

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

Az Angular.JS JS modul értékfüggvényét a "TutorialID" nevű kulcs-érték pár és az "5" érték létrehozására használják.

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

A TutorialID változó funkcióparaméterként válik hozzáférhetővé a vezérlő számára.

  1.  $scope.ID =TutorialID;

A TutorialID értéke 5, mostantól egy másik változóhoz, az úgynevezett ID-hez van rendelve a $ scope objektumban. Ez azért történik, hogy az 5-ös érték átkerülhessen a vezérlőből a nézetbe.

  1. {{ID}}

Az ID paraméter kifejezésként jelenik meg a nézetben. Tehát az '5' kimenete megjelenik az oldalon.

A fenti kód végrehajtása után a kimenet az alábbiak szerint jelenik meg

2) Szolgáltatás

A szolgáltatást egy egyedi JavaScript objektumként definiáljuk, amely olyan funkciók készletéből áll, amelyeket ki szeretne terjeszteni és a vezérlőbe injektálni kíván.

Például a "$ http" egy szolgáltatás az Angular.JS-ben, amely a vezérlőbe beadva biztosítja a

(get (), lekérdezés (), mentés (), eltávolítás (), törlés ()).

Ezeket a funkciókat ezután a vezérlőből ennek megfelelően lehívhatja.

Nézzünk meg egy egyszerű példát arra, hogyan hozhat létre saját szolgáltatást. Létrehozunk egy egyszerű hozzáadási szolgáltatást, amely két számot ad hozzá.

Event Registration

Guru99 Global Event




Result: {{result}}

A fenti példában a következő lépéseket hajtjuk végre

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

Itt létrehozunk egy új szolgáltatást, az úgynevezett „AdditionService” néven, a fő AngularJS JS modul szolgáltatás paraméterével.

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

Itt egy új függvényt hozunk létre az Addition nevű szolgáltatásunkban. Ez azt jelenti, hogy amikor az AngularJS példányosítja az AdditionService-t a kontrollerünk belsejében, akkor hozzáférhetünk az „Addition” funkcióhoz. Ebben a függvénydefinícióban azt mondjuk, hogy ez a függvény két paramétert fogad el, a és b.

  1.  return a+b;

Itt definiáljuk az Addition függvény törzsét, amely egyszerűen hozzáadja a paramétereket és visszaadja a hozzáadott értéket.

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

Ez a fő lépés, amely függőségi injekciót tartalmaz. A vezérlő definíciónkban most hivatkozunk az „AdditionService” szolgáltatásunkra. Amikor az AngularJS see ezt látja, akkor egy „AdditionService” típusú objektumot példányosít.

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

Most elérjük a szolgáltatásunkban definiált „Addition” függvényt, és hozzárendeljük a vezérlő $ scope objektumához.

Tehát ez egy egyszerű példa arra, hogyan definiálhatjuk szolgáltatásunkat, és a szolgáltatás funkcionalitását be tudjuk-e juttatni a vezérlőnkbe.

Összegzés:

  • A Dependency Injection, amint a neve is mutatja, a függő funkcionalitás futtatása a modulokba.
  • A függőségi injekció használata segít abban, hogy egy újrafelhasználhatóbb kód legyen. Ha több alkalmazásmodulon használt közös funkciója volt, akkor a legjobb módja annak, hogy meghatározzon egy központi szolgáltatást ezzel a funkcióval, majd ezt a szolgáltatást az alkalmazás moduljainak függőségeként adja be.
  • Az AngularJS értékobjektuma egyszerű JavaScript objektumok injektálására szolgál a vezérlőbe.
  • A szervizmodul meghatározhatja az egyéni szolgáltatásokat, amelyek többszörösen felhasználhatók több AngularJS modulban.