AngularJS függőségi befecskendezés: mely alkatrészeket fecskendezték be

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.

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.

Az oktatóanyag hátralévő részében részletesebben megvizsgáljuk a függőségi injekciót, és azt, hogy ez hogyan valósítható meg az AngularJS-ben.

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

Az Angular.JS-ben a függőségek „injektálható gyári módszerrel” vagy „konstruktorfüggvény” használatával kerülnek beillesztésre.

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.

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;

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.
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.
Az Angular.JS befecskendezője 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 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

Az egyik az „értékkomponens” révén
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ű létrehozásának tényén alapul JavaForgatókönyv objektumot, és továbbítsa azt az adatkezelőnek további feldolgozás céljából.

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

Step 1) Hozzon létre egy JavaÍrja le a szkriptobjektumot az érték összetevő 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.

Step 2) Kapcsolódás a JavaScript objektum a Szögletes.JS 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ódpéldában az alábbi fő lépéseket hajtjuk végre

```
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.

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.

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

A TutorialID értéke, amely 5, most egy másik, ID nevű változóhoz van hozzárendelve a $scope objektumban. Ez azért történik, hogy az 5-ös értéket át lehessen adni a vezérlőről a nézetre.

```
{{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 olyan szolgáltatás az Angular.JS-ben, amely a vezérlőkbe beillesztve 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

 mainApp.service('AdditionService', function()

Itt egy új szolgáltatást hozunk létre 'AdditionService' néven, a fő AngularJS JS modulunk szolgáltatási paraméterével.

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

Itt egy új, Addition nevű funkciót hozunk létre szolgáltatásunkon belül. Ez azt jelenti, hogy amikor az AngularJS példányosítja az AdditionService-ünket a vezérlőn belül, 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.

```
 return a+b;
```

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

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

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

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

Most elérjük a szolgáltatásunkban definiált 'Hozzáadás' funkciót, é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.

Összegzésként

A Dependency Injection, ahogy a neve is sugallja, a függő funkciók modulokba való beillesztésének folyamata futási időben.
A függőségi befecskendezés használata elősegíti az újrafelhasználható kódot. Ha rendelkezett több alkalmazásmodulban használt közös funkcióval, akkor a legjobb módszer az, ha egy központi szolgáltatást határoz meg ezzel a funkcióval, majd ezt a szolgáltatást függőségként illeszti be az alkalmazásmodulokba.
Az AngularJS értékobjektumával egyszerű injektálni lehet JavaSzkriptobjektumok a vezérlőben a $inject in használatával AngularJS.
A szervizmodul segítségével meghatározhatók az egyéni szolgáltatások, amelyek több AngularJS-modulon keresztül újra felhasználhatók.

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

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

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

1) Értékkomponens

KAPCSOLÓDÓ CIKKEK

2) Szolgáltatás

Összegzésként

Iratkozzon fel a hírlevélre