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