Kuinka toteuttaa riippuvuuden injektio AngularJs: ssä

Tämä artile antaa sinulle yksityiskohtaisen ja kattavan tiedon siitä, miten riippuvuuden injektio toteutetaan AngularJs: ssä.

Dependency Injection on ohjelmiston suunnittelumalli, joka määrittää tavan, jolla komponentit saavat selville riippuvuutensa. Komponenteille annetaan riippuvuudet kovan koodaamisen sijaan. Uudelleenkäytettävyys ja ylläpidettävyys voidaan saavuttaa riippuvuusinjektiolla. Korkeimman riippuvuuden injektio voidaan tehdä seuraavilla komponenteilla:





Arvon riippuvuuden injektio

Yksinkertainen objekti AngularJs: ssä tunnetaan arvona. Se voi olla merkkijono, numero tai jopa JavaScript-objekti. Sitä voidaan käyttää arvojen välittämiseen tehtaissa, palveluissa tai ohjaimissa ajo- ja määritysvaiheessa.

Esimerkki:



// määritä moduuli

var firstModule = kulmamoduuli ('firstModule', [])

// luoda arvo-objekti ja välittää sille tietoja



firstModule.value ('numberValue', 50)

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

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

Tässä esimerkissä arvot määritetään käyttämällä arvo () -funktiota. Ensimmäisen parametrin avulla määritetään arvon nimi, ja toinen parametri määrittää arvon. Tämän avulla tehtaat, palvelut ja ohjaimet voivat viitata näihin arvoihin itse nimellä.

Arvon syöttäminen

Voimme injektoida arvon AngularJs-ohjaintoimintoon lisäämällä parametrin, jolla on sama nimi kuin arvolla.

Esimerkki:

var firstModule = kulmamoduuli ('firstModule', [])

firstModule.value ('numberValue', 18)

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

console.log (numberValue)

})

Tehtaan injektio

Arvoja luova toiminto tunnetaan tehtaana. Tehdas luo tarpeen mukaan arvon aina, kun palvelu tai ohjain tarvitsee tehtaalta syötetyn arvon. Kun arvo on luotu, sitä käytetään uudelleen kaikissa palveluissa ja ohjaimissa.

Se käyttää tehdasfunktiota arvon laskemiseen ja palauttamiseen.

Esimerkki:

var firstModule = kulmamoduuli ('firstModule', [])

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

palauta 'arvo'

})

firstModule.controller ('FirstController', funktio ($ -alue, firstFactory) {

console.log (firstFactory)

})

Arvojen syöttäminen tehtaaseen

Arvo voidaan syöttää tehtaalle seuraavalla menetelmällä:

var firstModule = kulmamoduuli ('firstModule', [])

miten estää umpikujasta java

firstModule.value ('numberValue', 29)

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

console.log (numberValue)

})

On huomattava, että arvotehdasfunktion tuottama, ei itse tehdasfunktio. Siirrytään tämän artikkelin kanssa riippuvuuden injektiosta AngularJs: ssä.

Huolto-injektio kulmissaJ

Yksittäinen JavaScript-objekti, joka sisältää joukon toimintoja, tunnetaan palveluna AngularJs: ssä. Palvelun suorittamiseen tarvittava logiikka sisältyy toimintoon. Palvelu voidaan luoda käyttämällä moduulin service () -toimintoa.

Esimerkki:

// määritä moduuli

var firstApp = kulmamoduuli ('firstApp', [])

...

// luo palvelu, joka määrittelee menetelmän neliö palauttaa luvun neliön

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

this.neliö = function (x) {

palauta MathService.multiply (x, x)

}

})

// injektoi palvelu 'CalciService' ohjaimeen

firstApp.controller ('CalciController', funktio ($ -alue, CalciService,

defaultInput) {

$ scope.number = defaultInput

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

$ scope.square = function () {

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

}

})

Palveluntarjoaja

Palveluntarjoajaa käytetään palvelujen tai tehtaan sisäiseen luomiseen määritysvaiheessa. Provider on erityinen tehdasmenetelmä, jossa on get () -toiminto, jota käytetään palauttamaan arvo / palvelu / tehdas.

Esimerkki:

// määritä moduuli

var firstApp = kulmamoduuli ('firstApp', [])

...

// luo palvelu käyttäen palveluntarjoajaa, joka määrittää menetelmän neliön palauttamaan

luvun neliö.

firstApp.config (funktio ($ antaa) {

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

tämä. $ get = function () {

var tehdas =

tehdas.multiply = function (x, y) {

palauta x * y

}

palata tehtaalle

}

})

})

Jatkuva

Koska käyttäjä ei voi syöttää arvoja module.config () -funktioon, käytämme vakioita. Vakioita käytetään arvojen välittämiseen konfigurointivaiheessa.

firstApp.constant ('configParam', 'vakioarvo')

Esimerkki:

Edellä mainittuja direktiivejä voidaan käyttää seuraavalla tavalla:

Riippuvuuden injektio

KulmaJS-neliöesimerkki

Syötä mikä tahansa numero:

X2

Tulos: {{result}}

var firstApp = kulmamoduuli ('firstApp', [])

firstApp.config (funktio ($ antaa) {

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

tämä. $ get = function () {

var tehdas =

tehdas.multiply = function (x, y) {

palauta x * y

}

palata tehtaalle

}

})

})

löytää matriisin javan suurin elementti

firstApp.value ('defaultInput', 6)

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

var tehdas =

tehdas.multiply = function (x, y) {

palauta x * y

}

palata tehtaalle

})

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

this.neliö = function (x) {

palauta MathService.multiply (x, x)

}

})

firstApp.controller ('CalciController', funktio ($ -alue, CalciService, defaultInput) {

$ scope.number = defaultInput

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

$ scope.square = function () {

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

}

})

LÄHTÖ:

riippuvuuden injektio angularjissa

Tämän avulla olemme päättäneet tämän riippuvuusinjektion AngularJs-artikkelissa. C helvetti Edureka, luotettava verkko-oppimisyritys, jolla on yli 250 000 tyytyväisen oppijan verkosto, joka levisi ympäri maailmaa.

Onko sinulla kysymys meille? Mainitse se tämän riippuvuusinjektion kommenttiosassa AngularJs: ssä, ja palaamme sinuun.