Hur man implementerar beroendeinjektion i AngularJs

Denna artikel ger dig en detaljerad och omfattande kunskap om hur du implementerar Dependency Injection in AngularJs.

Dependency Injection är ett mjukvarudesignmönster som anger hur komponenter får tag i deras beroenden. Komponenterna får sina beroenden istället för att hårdkoda dem. Återanvändbarhet och underhållsförmåga kan uppnås med hjälp av beroendeinjektion. Högsta beroendeinjektion i kan göras med följande komponenter:





Värdeberoende injektion

Ett enkelt objekt i AngularJs är känt som ett värde. Det kan vara en sträng, ett nummer eller till och med ett JavaScript-objekt. Den kan användas för att skicka värden i fabriker, tjänster eller styrenheter under kör- och konfigurationsfasen.

Exempel:



// definiera en modul

var firstModule = angular.module ('firstModule', [])

// skapa ett värdeobjekt och skicka data till det



firstModule.value ('numberValue', 50)

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

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

I detta exempel definieras värden med funktionen värde (). Namnet på värdet anges av den första parametern och den andra parametern anger värdet. Detta gör det möjligt för fabriker, tjänster och styrenheter att hänvisa till dessa värden med själva namnet.

Injicera ett värde

Vi kan injicera ett värde i AngularJs-styrfunktionen genom att lägga till en parameter med samma namn som värdet.

Exempel:

var firstModule = angular.module ('firstModule', [])

firstModule.value ('numberValue', 18)

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

console.log (numberValue)

})

Fabriksinjektion

En funktion som skapar värden kallas en fabrik. Ett värde på begäran skapas av fabriken närhelst en tjänst eller styrenhet behöver ett värde som injiceras från fabriken. När värdet har skapats återanvänds det för alla tjänster och styrenheter.

Det använder fabriksfunktionen för att beräkna och returnera värdet.

Exempel:

var firstModule = angular.module ('firstModule', [])

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

returnera 'ett värde'

})

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

console.log (firstFactory)

})

Injicerar värden till fabriken

Ett värde kan injiceras till fabriken enligt följande metod:

var firstModule = angular.module ('firstModule', [])

firstModule.value ('numberValue', 29)

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

console.log (numberValue)

})

Det måste noteras att värdetproduceras av fabriksfunktionen injiceras, inte själva fabriksfunktionen. Låt oss gå vidare med den här artikeln om Dependency Injection in AngularJs.

Serviceinjektion i AngularJs

Ett singleton JavaScript-objekt som innehåller en uppsättning funktioner kallas en tjänst i AngularJs. Den logik som krävs för att tjänsten ska kunna utföras finns i funktionen. Tjänsten kan skapas med hjälp av tjänsten () -funktionen på en modul.

Exempel:

// definiera en modul

var firstApp = angular.module ('firstApp', [])

...

// skapa en tjänst som definierar en metod kvadrat för att returnera kvadraten för ett tal

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

this.square = funktion (x) {

returnera MathService.multiply (x, x)

}

})

// injicera tjänsten 'CalciService' i styrenheten

firstApp.controller ('CalciController', funktion ($ scope, CalciService,

defaultInput) {

$ scope.number = defaultInput

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

c ++ lagringsklass

$ scope.square = funktion () {

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

}

})

Leverantör

För att internt skapa tjänster eller fabrik under konfigurationsfasen använder vi leverantören. Provider är en speciell fabriksmetod med en get () -funktion som används för att returnera värdet / tjänsten / fabriken.

Exempel:

// definiera en modul

var firstApp = angular.module ('firstApp', [])

...

// skapa en tjänst med hjälp av leverantör som definierar en metodkvadrat för att returnera

kvadrat av ett tal.

firstApp.config (funktion ($ tillhandahålla) {

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

detta. $ get = function () {

var fabrik =

fabrik.multiply = funktion (x, y) {

returnera x * y

}

returfabrik

}

})

})

Konstant

Eftersom användaren inte kan injicera värden i funktionen module.config () använder vi konstanter. Konstanter används för att skicka värden i konfigurationsfasen.

firstApp.constant (“configParam”, “konstant värde”)

Exempel:

Direktiven som nämns ovan kan användas på följande sätt:

Beroende injektion

AngularJS kvadreringsexempel

Ange valfritt nummer:

X2

Resultat: {{resultat}}

var firstApp = angular.module ('firstApp', [])

firstApp.config (funktion ($ tillhandahålla) {

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

detta. $ get = function () {

var fabrik =

fabrik.multiply = funktion (x, y) {

returnera x * y

}

returfabrik

}

})

})

firstApp.value ('defaultInput', 6)

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

var fabrik =

fabrik.multiply = funktion (x, y) {

returnera x * y

}

returfabrik

})

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

this.square = funktion (x) {

returnera MathService.multiply (x, x)

}

})

firstApp.controller ('CalciController', funktion ($ scope, CalciService, defaultInput) {

$ scope.number = defaultInput

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

$ scope.square = funktion () {

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

}

})

PRODUKTION:

beroendeinjektion i angularjs

Med detta kommer vi till ett slut på denna Dependency Injection i AngularJs-artikeln. C heck ut av Edureka, ett pålitligt online-lärande företag med ett nätverk av mer än 250 000 nöjda elever spridda över hela världen.

Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i denna Dependency Injection in AngularJs så kommer vi tillbaka till dig.