La injecció de dependència és un patró de disseny de programari que especifica la forma en què els components aconsegueixen les seves dependències. Els components reben les seves dependències en lloc de codificar-los de manera dura. La reutilització i el manteniment es poden aconseguir mitjançant la injecció de dependència. Injecció de Dependència Suprema a es pot fer mitjançant els components següents:
- Injecció de dependència del valor
- Injecció de fàbrica
- Servei d’injecció en AngularJs
- Proveïdor
- Constant
Injecció de dependència del valor
Un objecte simple a AngularJs es coneix com a valor. Pot ser una cadena, un número o fins i tot un objecte JavaScript. Es pot utilitzar per passar valors a fàbriques, serveis o controladors durant la fase d'execució i configuració.
Exemple:
// defineix un mòdul
var firstModule = angular.module ('primerMòdul', [])
// crear un objecte de valor i passar-hi dades
firstModule.value ('numberValue', 50)
firstModule.value ('stringValue', 'xyz')
firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})
En aquest exemple, els valors es defineixen mitjançant la funció value (). El primer paràmetre especifica el nom del valor i el segon. Això permet a les fàbriques, serveis i controladors referenciar aquests valors pel seu propi nom.
Injecció d’un valor
Podem injectar un valor a la funció de controlador AngularJs afegint un paràmetre amb el mateix nom que el valor.
Exemple:
var firstModule = angular.module ('primerMòdul', [])
firstModule.value ('numberValue', 18)
firstModule.controller ('FirstController', funció ($ scope, numberValue) {
console.log (númeroValor)
})
Injecció de fàbrica
Una funció que crea valors es coneix com a fàbrica. La fàbrica crea un valor a demanda, sempre que un servei o controlador necessiti un valor injectat de la fàbrica. Un cop creat el valor, es reutilitza per a tots els serveis i controladors.
Utilitza la funció de fàbrica per calcular i retornar el valor.
Exemple:
var firstModule = angular.module ('primerMòdul', [])
firstModule.factory ('firstFactory', function () {
torna 'un valor'
})
firstModule.controller ('FirstController', funció ($ scope, firstFactory) {
console.log (firstFactory)
})
Injecció de valors a la fàbrica
Es pot injectar un valor a la fàbrica mitjançant el mètode següent:
var firstModule = angular.module ('primerMòdul', [])
firstModule.value ('numberValue', 29)
firstModule.controller ('FirstController', funció ($ scope, numberValue) {
console.log (númeroValor)
})
Cal tenir en compte que el valorproduït per la funció de fàbrica s'injecta, no la funció de fàbrica en si. Continuem amb aquest article sobre la injecció de dependència a AngularJs.
Servei d’injecció en AngularJs
Un objecte JavaScript singular que conté un conjunt de funcions es coneix com a servei a AngularJs. La lògica necessària per a la realització del servei es troba a la funció. El servei es pot crear mitjançant la funció service () d’un mòdul.
Exemple:
// defineix un mòdul
var firstApp = angular.module ('firstApp', [])
on s'han de declarar les variables d'instància a java
...
// crear un servei que defineixi un mètode quadrat per retornar el quadrat d’un nombre
firstApp.service ('CalciService', funció (MathService) {
this.square = funció (x) {
torna MathService.multiply (x, x)
}
})
// injecteu el servei 'CalciService' al controlador
firstApp.controller ('CalciController', funció ($ scope, CalciService,
entrada predeterminada) {
$ scope.number = Entrada predeterminada
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}
})
Proveïdor
Per crear serveis interns o fàbrica durant la fase de configuració, fem ús del proveïdor. El proveïdor és un mètode de fàbrica especial amb una funció get () que s’utilitza per retornar el valor / servei / fàbrica.
Exemple:
// defineix un mòdul
var firstApp = angular.module ('firstApp', [])
...
// creeu un servei mitjançant un proveïdor que defineixi un mètode quadrat per retornar el
quadrat d’un nombre.
firstApp.config (funció ($ provide) {
$ provide.provider ('MathService', function () {
això. $ get = function () {
var fàbrica =
factory.multiply = funció (x, y) {
return x * i
}
fàbrica de retorn
}
})
})
Constant
Com que l'usuari no pot injectar valors a la funció module.config (), fem ús de constants. Les constants s’utilitzen per passar valors a la fase de configuració.
firstApp.constant ('configParam', 'valor constant')
Exemple:
Les directives esmentades anteriorment es poden utilitzar de la següent manera:
Injecció de dependència
Exemple de quadratura AngularJS
Introduïu qualsevol número:
X2
Resultat: {{result}}
var firstApp = angular.module ('firstApp', [])
firstApp.config (funció ($ provide) {
$ provide.provider ('MathService', function () {
això. $ get = function () {
var fàbrica =
factory.multiply = funció (x, y) {
return x * i
}
fàbrica de retorn
}
})
})
firstApp.value ('defaultInput', 6)
firstApp.factory ('MathService', function () {
var fàbrica =
factory.multiply = funció (x, y) {
return x * i
}
fàbrica de retorn
})
firstApp.service ('CalciService', funció (MathService) {
this.square = funció (x) {
torna MathService.multiply (x, x)
}
})
firstApp.controller ('CalciController', funció ($ scope, CalciService, defaultInput) {
$ scope.number = Entrada predeterminada
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}
})
SORTIDA:
Amb això, arribem al final d’aquest article sobre la injecció de dependència a AngularJs. C fes un cop d'ull al per Edureka, una empresa d'aprenentatge en línia de confiança amb una xarxa de més de 250.000 estudiants satisfets repartits per tot el món.
Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris d'aquesta injecció de dependència a AngularJs i us respondrem.