Hogyan lehet megvalósítani a függőségi injekciót az AngularJ-ben

Ez a cikk részletes és átfogó ismereteket nyújt Önnek a függőségi injekció AngularJ-kben történő megvalósításáról.

A Dependency Injection egy szoftvertervezési minta, amely meghatározza, hogy az összetevők hogyan tudják megszerezni függőségüket. Az összetevők megkapják a függőségüket ahelyett, hogy keményen kódolnák őket. Az újrafelhasználhatóság és a karbantarthatóság függőségi injekcióval érhető el. Legfelsőbb függőségi injekció a következő komponensekkel végezhető el:





Értékfüggőség befecskendezése

Az AngularJs egyszerű objektumát értékként ismerjük. Ez lehet karakterlánc, szám vagy akár JavaScript objektum. Használható gyárak, szolgáltatások vagy vezérlők értékeinek átadására a futtatás és a konfigurálás szakaszában.

Példa:



// modul meghatározása

var firstModule = szögletes.module ('firstModule', [])

// létrehoz egy értékobjektumot, és adatokat továbbít neki



firstModule.value ('numberValue', 50)

firstModule.value ('stringValue', 'xyz')

firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})

Ebben a példában az értékeket az érték () függvény segítségével határozzuk meg. Az érték nevét az első paraméter, a második paraméter pedig az értéket adja meg. Ez lehetővé teszi a gyárak, szolgáltatások és vezérlők számára, hogy maguk a nevük alapján hivatkozhassanak ezekre az értékekre.

Érték beadása

Input beírhatunk egy értéket az AngularJs vezérlő funkcióba úgy, hogy hozzáadunk egy, az értékkel megegyező nevű paramétert.

Példa:

var firstModule = szögletes.module ('firstModule', [])

firstModule.value ('numberValue', 18)

firstModule.controller ('FirstController', function ($ hatókör, numberValue) {

console.log (numberValue)

})

Gyári befecskendezés

Az értékeket létrehozó függvény gyár néven ismert. Igény szerint értéket a gyár hoz létre, amikor egy szolgáltatásnak vagy vezérlőnek szüksége van egy gyárilag beadott értékre. Az érték létrehozása után az újból felhasználásra kerül az összes szolgáltatás és vezérlő számára.

A gyári függvényt használja az érték kiszámításához és visszaadásához.

Példa:

var firstModule = szögletes.module ('firstModule', [])

firstModule.factory ('firstFactory', function () {

visszatér egy „érték”

})

firstModule.controller ('FirstController', function ($ hatókör, firstFactory) {

console.log (firstFactory)

})

Értékek beadása a gyárba

Egy értéket a következő módszerrel lehet a gyárba injektálni:

var firstModule = szögletes.module ('firstModule', [])

firstModule.value ('numberValue', 29)

firstModule.controller ('FirstController', function ($ hatókör, numberValue) {

console.log (numberValue)

})

Meg kell jegyezni, hogy az érték a gyári funkció által előállított injekció kerül beadásra, nem maga a gyári funkció. Folytassuk ezt a cikket a Dependency Injection in AngularJs-ben.

Szolgáltatás befecskendezése szögletes J-kben

A szingulett JavaScript objektum, amely egy sor funkciót tartalmaz, az AngularJs szolgáltatásként ismert. A szolgáltatás végrehajtásához szükséges logikát a függvény tartalmazza. A szolgáltatás a modul service () függvényével hozható létre.

Példa:

// modul meghatározása

var firstApp = szögletes modul ('firstApp', [])

...

// létrehoz egy szolgáltatást, amely meghatároz egy módszert négyzet, hogy visszatérjen egy szám négyzetéhez

firstApp.service ('CalciService', függvény (MathService) {

this.négyzet = függvény (x) {

return MathService.multiply (x, x)

}

})

// injektálja a 'CalciService' szolgáltatást a vezérlőbe

firstApp.controller ('CalciController', function ($ hatókör, CalciService,

defaultInput) {

hogyan lehet konvertálni a stringet dátumra a java-ban

$ scope.number = defaultInput

$ scope.result = CalciService.square ($ scope.number)

$ scope.square = function () {

$ scope.result = CalciService.square ($ scope.number)

}

})

Szolgáltató

Szolgáltatások vagy gyár belső létrehozásához a konfigurációs szakaszban a Szolgáltatót vesszük igénybe. A Provider egy speciális gyári módszer get () függvénnyel, amelyet az érték / szolgáltatás / gyár visszaadására használnak.

Példa:

// modul meghatározása

var firstApp = szögletes modul ('firstApp', [])

...

// létrehozni egy szolgáltatót használó szolgáltatást, amely meghatározza a metódus négyzetét a

szám négyzete.

firstApp.config (function ($ biztosítja) {

$ provide.provider ('MathService', function () {

ez. $ get = function () {

var gyár =

gyár.többször = függvény (x, y) {

vissza x * y

}

visszatérő gyár

}

})

})

Állandó

Mivel a felhasználó nem adhat be értékeket a module.config () függvénybe, használunk konstansokat. Az állandókat az értékek átadására használják a konfigurációs szakaszban.

firstApp.constant („configParam”, „állandó érték”)

Példa:

A fent említett irányelveket a következőképpen lehet felhasználni:

Függőségi injekció

php print_r tömb

AngularJS négyzet példa

Írjon be bármilyen számot:

x2

Eredmény: {{eredmény}}

var firstApp = szögletes modul ('firstApp', [])

firstApp.config (function ($ biztosítja) {

$ provide.provider ('MathService', function () {

ez. $ get = function () {

var gyár =

gyár.többször = függvény (x, y) {

vissza x * y

}

visszatérő gyár

}

})

})

firstApp.value ('defaultInput', 6)

firstApp.factory ('MathService', function () {

var gyár =

gyár.többször = függvény (x, y) {

vissza x * y

}

visszatérő gyár

})

firstApp.service ('CalciService', függvény (MathService) {

this.négyzet = függvény (x) {

return MathService.multiply (x, x)

}

})

firstApp.controller ('CalciController', function ($ hatókör, CalciService, defaultInput) {

$ scope.number = defaultInput

$ scope.result = CalciService.square ($ scope.number)

$ scope.square = function () {

$ scope.result = CalciService.square ($ scope.number)

}

})

KIMENET:

függőségi injekció angularjs-ban

Ezzel véget értünk ennek a függőségi injekciónak az AngularJs cikkében. C a fenébe az Edureka, egy megbízható online tanulási vállalat, amelynek több mint 250 000 elégedett tanulóval rendelkező hálózata elterjedt az egész világon.

Van egy kérdésünk? Kérjük, említse meg ennek a függőségi injekciónak az AngularJs megjegyzéseiben, és kapcsolatba lépünk Önnel.