AngularJS függőségi injektálási komponensek

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

Függőség-befecskendezés Az AngularJS-ben egy szoftvertervezési minta, amely a függőségek feloldásához a vezérlés megfordítását valósítja meg. Ez dönti el, hogy az összetevők hogyan tartják fenn a függőségeiket. Használható a komponensek meghatározásakor vagy a modul futtatási és konfigurációs blokkjainak megadásakor. Lehetővé teszi az összetevők újrafelhasználhatóvá, tesztelhetővé és karbantarthatóvá tételét.

A vezérlés megfordítása: Ez azt jelenti, hogy az objektumok nem hoznak létre más objektumokat, amelyekre munkájuk elvégzése során támaszkodnak. Ehelyett külső forrásból szerzik be ezeket a tárgyakat. Ez képezi az AngularJS Dependency Injection alapját, ahol ha az egyik objektum egy másiktól függ; az elsődleges objektum nem vállalja a felelősséget a függő objektum létrehozásáért, majd annak metódusainak használatáért. Ehelyett egy külső forrás (amely az AngularJS-ben maga az AngularJS keretrendszer) hozza létre a függő objektumot, és adja át a forrásobjektumnak további felhasználás céljából.

⚠️ Verzió megjegyzés: Az AngularJS támogatása 2022 januárjában megszűnt., biztonsági javítások nélkül. A Modern Angular @Injectable szolgáltatókon keresztül injektál, és injekció()Az alábbi kód történelmi jellegű marad.

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

A fenti diagram egy egyszerű AngularJS függőségi injekció példát mutat be egy mindennapi rituáléra az adatbázis-programozásban.

• A „Modell” mező a „Modell osztályt” ábrázolja, amely általában az adatbázissal való interakcióhoz jön létre. Így most az adatbázis a „Modell osztály” működésének függősége.
• A függőségi injekcióval olyan szolgáltatást hozunk létre, amely az adatbázisból az összes információt megkapja, és bekerül a modellosztályba.

A bemutató további részében a függőségbefecskendezést és annak megvalósítását fogjuk megvizsgálni. AngularJS.

Melyik komponens injektálható függőségként az AngularJS-ben?

Az AngularJS-ben a függőségeket „injektálható gyári metódus” vagy „konstruktor függvény” segítségével injektáljuk.

Ezek az összetevők „szolgáltatás” és „érték” komponensekkel illeszthetők be függőségekként. Ezt láttuk egy korábbi témakörben a $http szolgáltatással.

Egy AngularJS modul öt recept alapján regisztrálja az injektálható tárgyakat.

Már láttuk, hogy az AngularJS-en belül a $http szolgáltatás használható adatok beszerzésére a MySQL vagy MS SQL Szerver adatbázis a PHP webalkalmazás.

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ás definiálva van a vezérlőben a fent látható módon. Ez azt jelenti, hogy a vezérlő most a $http szolgáltatástól függ.

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ításra került-e. Mivel a „vezérlőnk” mostantól a „$http szolgáltatástól” függ, ennek a szolgáltatásnak egy objektumát elérhetővé kell tenni vezérlőnk számára.
2. Ha az AngularJS rájön, 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 AngularJS injektora ezután a $http szolgáltatás egy példányát biztosítja a vezérlőnk számára további feldolgozás céljából.

Jegyzetűrlapok: Implicit annotáció A paraméternevek beolvasása, így a minimalizálás megszakítja azt. Az inline tömbjelölés és a $inject is túléli; az ng-strict-di az ng-app-on elutasítja az implicit annotációt.

Most, hogy a függőséget beinjektáljuk a vezérlőnkbe, a szükséges funkciókat a $http szolgáltatáson belül hívhatjuk meg további feldolgozáshoz.

Példa a függőségi injekcióra

Ebben a példában megtanuljuk, hogyan kell használni a függőségi injekciót az AngularJS-ben.

A függőségi injekció 2 módon valósítható meg

1. Az egyik az „értékkomponens” révén
2. Egy másik egy „Szolgáltatáson” keresztül

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

1) Értékkomponens

Ez a koncepció egy egyszerű dolog létrehozásán alapul JavaForgatókönyv objektumot, és átadja azt a vezérlőnek további feldolgozásra.

Ez az alábbi két lépéssel valósítható meg

Step 1) Hozzon létre egy JavaScript objektumot a value komponens használatával, és csatold a fő AngularJS modulodhoz.

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

Step 2) Kapcsolódás a JavaScript objektum a AngularJS vezérlő

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

A fenti kód az alábbi lépéseket hajtja végre

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

   Az AngularJS modul value függvényét használjuk egy „TutorialID” nevű kulcs-érték pár és az „5” érték létrehozására.

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

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

3.  $scope.ID =TutorialID;

   A TutorialID értéke, ami 5, most egy másik, ID nevű változóhoz lesz hozzárendelve a $hatókör objektum. Ez azért történik, hogy az 5-ös érték átadható legyen a vezérlőből a nézetnek.

4. {{ID}}

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

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

2) Szolgáltatás

A szolgáltatás definíciója szerint egyszemélyes JavaSzkriptobjektum, amely olyan függvénykészletből áll, amelyet meg szeretne jeleníteni, és be kíván injektálni a vezérlőbe.

Például a „$http” egy AngularJS szolgáltatás, amely a vezérlőkbe injektálva biztosítja a szükséges funkciókat.

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

Ezeket a funkciókat ezután megfelelően elő lehet hívni a vezérlőből.

Nézzünk egy egyszerű példát arra, hogyan hozhat létre saját szolgáltatást. Egy egyszerű összeadási szolgáltatást fogunk létrehozni, amely két számot ad hozzá.

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

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, melynek neve „AdditionService” a fő AngularJS modulunk service paraméterének használatával.

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

   Itt létrehozunk egy új függvényt, az ADDITION-t a szolgáltatásunkon belül. Ez azt jelenti, hogy amikor az AngularJS példányosítja az AdditionService-t a vezérlőn belül, akkor hozzáférhetünk az 'ADDITION' függvényhez. Ebben a függvénydefinícióban azt mondjuk, hogy ez a függvény két paramétert fogad el, a-t és b-t.

3.  return a+b;

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

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

   Ez a fő lépés, amely a függőségbefecskendezést foglalja magában. A vezérlődefiníciónkban most az „AdditionService” szolgáltatásunkra hivatkozunk. Amikor az AngularJS ezt látja, létrehoz egy „AdditionService” típusú objektumot.

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

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

Tehát ez egy egyszerű példa arra, hogyan határozhatjuk meg szolgáltatásunkat, és hogyan illeszthetjük be a szolgáltatás funkcionalitását a vezérlőnkbe.

GYIK