Kuidas rakendada sõltuvuse süstimist nurkades

See artikel annab teile üksikasjalikud ja põhjalikud teadmised selle kohta, kuidas rakendada sõltuvuse süstimist AngularJ-des.

Dependency Injection on tarkvara kujundusmuster, mis määrab viisi, kuidas komponendid saavad oma sõltuvuse kätte. Komponentidele antakse nende sõltuvus selle asemel, et neid kodeerida. Korduvkasutatavuse ja hooldatavuse saab saavutada sõltuvussüstimisega. Kõrgeima sõltuvuse süstimine aastal saab teha järgmiste komponentide abil:





Väärtusest sõltuvuse süstimine

Lihtne objekt nurkades on tuntud kui väärtus. See võib olla string, number või isegi JavaScripti objekt. Seda saab kasutada tehaste, teenuste või kontrollerite väärtuste edastamiseks töötamise ja seadistamise etapis.

Näide:



// määrake moodul

var firstModule = nurk.moodul ('firstModule', [])

// looge väärtusobjekt ja edastage sellele andmed



firstModule.value ('numberValue', 50)

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

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

Selles näites määratletakse väärtused funktsiooni value () abil. Väärtuse nime määrab esimene parameeter ja teine ​​parameeter määrab väärtuse. See võimaldab tehastel, teenustel ja kontrolleritel viidata nendele väärtustele oma nime järgi.

Väärtuse sisestamine

Võime sisestada väärtuse kontrolleri funktsiooni AngularJs, lisades parameetriga sama nimega parameetri.

Näide:

var firstModule = nurk.moodul ('firstModule', [])

firstModule.value ('numberValue', 18)

firstModule.controller ('FirstController', funktsioon ($ scope, numberValue) {

console.log (numberValue)

})

Tehase süstimine

Väärtusi loov funktsioon on tuntud kui tehas. Vajaduse korral loob tehas väärtuse alati, kui teenus või kontroller vajab tehasest sisestatud väärtust. Kui väärtus on loodud, kasutatakse seda uuesti kõigi teenuste ja kontrollerite jaoks.

Väärtuse arvutamiseks ja tagastamiseks kasutatakse tehase funktsiooni.

Näide:

var firstModule = nurk.moodul ('firstModule', [])

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

tagastama 'a value'

})

firstModule.controller ('FirstController', funktsioon ($ scope, firstFactory) {

console.log (firstFactory)

})

Väärtuste sisestamine tehasesse

Väärtuse saab tehasesse sisestada järgmise meetodi abil:

var firstModule = nurk.moodul ('firstModule', [])

firstModule.value ('numberValue', 29)

firstModule.controller ('FirstController', funktsioon ($ scope, numberValue) {

console.log (numberValue)

})

Tuleb märkida, et väärtussüstitakse tehase funktsiooni poolt, mitte tehase funktsioon ise. Jätkame selle artikliga 'Sõltuvuse süstimine' nurkades J.

Teenuse süstimine nurkades

Funktsioonide komplekti sisaldav üksik JavaScripti objekt on AngularJs-s teenusena tuntud. Teenuse teostamiseks vajalik loogika sisaldub funktsioonis. Teenuse saab luua mooduli funktsiooni service () abil.

Näide:

// määrake moodul

var firstApp = nurgeline moodul ('firstApp', [])

kevadine mvc õpetus algajatele

...

// loo teenuse, mis määratleb meetodi ruut, et tagastada arvu ruut

firstApp.service ('CalciService', funktsioon (MathService) {

this.ruut = function (x) {

tagastage MathService.multiply (x, x)

}

})

// süstige teenus 'CalciService' kontrollerisse

firstApp.controller ('CalciController', funktsioon (ulatus $ $, CalciService,

defaultInput) {

$ scope.number = defaultInput

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

$ scope.square = function () {

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

}

})

Pakkuja

Teenuste või tehase loomiseks konfigureerimise etapis kasutame teenusepakkujat. Pakkuja on spetsiaalne tehase meetod funktsiooniga get (), mida kasutatakse väärtuse / teenuse / tehase tagastamiseks.

Näide:

// määrake moodul

var firstApp = nurgeline moodul ('firstApp', [])

...

// loo teenuse pakkuja abil teenus, mis määrab meetodi ruudu tagastamiseks

arvu ruut.

firstApp.config (funktsioon ($ pakkuda) {

$ pakkuda.provider ('MathService', funktsioon () {

see. $ get = function () {

var tehas =

tehas.multiply = function (x, y) {

tagastage x * y

}

tagasi tehas

}

})

})

Pidev

Kuna kasutaja ei saa funktsiooni module.config () väärtusi sisestada, kasutame konstante. Konstante kasutatakse väärtuste edastamiseks konfigureerimise etapis.

firstApp.constant ('configParam', 'konstantne väärtus')

Näide:

Eespool nimetatud direktiive saab kasutada järgmiselt:

erinevus jquery ja javascripti vahel

Sõltuvuse süstimine

NurgaJS ruutude näide

Sisestage mis tahes number:

X2

Tulemus: {{result}}

var firstApp = nurgeline moodul ('firstApp', [])

firstApp.config (funktsioon ($ pakkuda) {

$ pakkuda.provider ('MathService', funktsioon () {

see. $ get = function () {

var tehas =

tehas.multiply = function (x, y) {

tagastage x * y

}

tagasi tehas

}

})

})

firstApp.value ('defaultInput', 6)

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

var tehas =

tehas.multiply = function (x, y) {

tagastage x * y

}

tagasi tehas

})

firstApp.service ('CalciService', funktsioon (MathService) {

this.ruut = function (x) {

tagastage MathService.multiply (x, x)

}

})

mis on __init__

firstApp.controller ('CalciController', funktsioon (ulatus $ $, CalciService, defaultInput) {

$ scope.number = defaultInput

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

$ scope.square = function () {

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

}

})

VÄLJUND:

sõltuvuse süstimine angularjs

Sellega jõuame selle AngularJs-i artikli sõltuvuse süstimise lõppu. C kurat välja autor Edureka, usaldusväärne veebiõppeettevõte, mille võrgustik koosneb enam kui 250 000 rahulolevast õppijast ja mis levib üle kogu maailma.

Kas teil on meile küsimus? Palun mainige seda selle AngularJs-i sõltuvuse süstimise kommentaaride osas ja võtame teiega ühendust.