L'injection de dépendances est un modèle de conception logicielle qui spécifie la manière dont les composants récupèrent leurs dépendances. Les composants reçoivent leurs dépendances au lieu de les coder en dur. La réutilisation et la maintenabilité peuvent être obtenues en utilisant l'injection de dépendances. Injection de dépendance suprême dans peut être fait par les composants suivants:
- Injection de dépendance de valeur
- Injection d'usine
- Injection de service dans AngularJs
- Fournisseur
- Constant
Injection de dépendance de valeur
Un objet simple dans AngularJs est appelé valeur. Cela peut être une chaîne, un nombre ou même un objet JavaScript. Il peut être utilisé pour transmettre des valeurs dans les usines, les services ou les contrôleurs pendant la phase d'exécution et de configuration.
Exemple:
// définir un module
var firstModule = angular.module ('premierModule', [])
// crée un objet de valeur et lui transmet des données
firstModule.value ('numberValue', 50)
firstModule.value ('stringValue', 'xyz')
firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})
Dans cet exemple, les valeurs sont définies à l'aide de la fonction value (). Le nom de la valeur est spécifié par le premier paramètre et le second paramètre spécifie la valeur. Cela permet aux usines, aux services et aux contrôleurs de référencer ces valeurs par leur nom lui-même.
Injecter une valeur
Nous pouvons injecter une valeur dans la fonction de contrôleur AngularJs en ajoutant un paramètre avec le même nom que la valeur.
Exemple:
var firstModule = angular.module ('premierModule', [])
firstModule.value ('numberValue', 18)
firstModule.controller ('FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
Injection d'usine
Une fonction qui crée des valeurs est appelée usine. Une valeur à la demande est créée par l'usine, chaque fois qu'un service ou un contrôleur a besoin d'une valeur injectée depuis l'usine. Une fois la valeur créée, elle est réutilisée pour tous les services et contrôleurs.
Il utilise la fonction d'usine pour calculer et renvoyer la valeur.
Exemple:
var firstModule = angular.module ('premierModule', [])
firstModule.factory ('firstFactory', function () {
renvoie 'une valeur'
})
firstModule.controller ('FirstController', function ($ scope, firstFactory) {
console.log (firstFactory)
})
Injection de valeurs en usine
Une valeur peut être injectée en usine par la méthode suivante:
var firstModule = angular.module ('premierModule', [])
firstModule.value ('numberValue', 29)
firstModule.controller ('FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
Il faut noter que la valeurproduit par la fonction d'usine est injecté, pas la fonction d'usine elle-même. Passons à cet article d'Injection de dépendances dans AngularJs.
Injection de service dans AngularJs
Un objet JavaScript singleton qui contient un ensemble de fonctions est appelé service dans AngularJs. La logique nécessaire au service à exécuter est contenue dans la fonction. Le service peut être créé en utilisant la fonction service () sur un module.
Exemple:
// définir un module
var firstApp = angular.module ('firstApp', [])
...
// crée un service qui définit une méthode square pour renvoyer le carré d'un nombre
firstApp.service ('CalciService', fonction (MathService) {
this.square = fonction (x) {
retourne MathService.multiply (x, x)
}
})
// injecte le service 'CalciService' dans le contrôleur
firstApp.controller ('CalciController', fonction ($ scope, CalciService,
defaultInput) {
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = fonction () {
$ scope.result = CalciService.square ($ scope.number)
}
})
Fournisseur
Pour créer en interne des services ou une usine pendant la phase de configuration, nous utilisons Provider. Provider est une méthode de fabrique spéciale avec une fonction get () qui est utilisée pour renvoyer la valeur / service / usine.
Exemple:
// définir un module
var firstApp = angular.module ('firstApp', [])
java comment terminer le programme
...
// crée un service à l'aide d'un fournisseur qui définit un carré de méthode pour renvoyer le
carré d'un nombre.
firstApp.config (fonction ($ provide) {
$ provide.provider ('MathService', function () {
ceci. $ get = function () {
var usine =
factory.multiply = fonction (x, y) {
retourne x * y
}
retour usine
}
})
})
Constant
Puisque l'utilisateur ne peut pas injecter de valeurs dans la fonction module.config (), nous utilisons des constantes. Les constantes sont utilisées pour transmettre des valeurs lors de la phase de configuration.
firstApp.constant ('configParam', 'valeur constante')
Exemple:
Les directives mentionnées ci-dessus peuvent être utilisées de la manière suivante:
Injection de dépendance
Exemple de quadrillage AngularJS
Entrez un nombre quelconque:
X2
Résultat: {{result}}
var firstApp = angular.module ('firstApp', [])
firstApp.config (fonction ($ provide) {
$ provide.provider ('MathService', function () {
ceci. $ get = function () {
var usine =
factory.multiply = fonction (x, y) {
retourne x * y
}
retour usine
}
})
})
firstApp.value ('defaultInput', 6)
firstApp.factory ('MathService', function () {
var usine =
factory.multiply = fonction (x, y) {
retourne x * y
}
retour usine
})
firstApp.service ('CalciService', fonction (MathService) {
this.square = fonction (x) {
retourne MathService.multiply (x, x)
}
})
firstApp.controller ('CalciController', function ($ scope, CalciService, defaultInput) {
$ scope.number = defaultInput
comment installer php sur windows 7
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = fonction () {
$ scope.result = CalciService.square ($ scope.number)
}
})
PRODUCTION:
Avec cela, nous arrivons à la fin de cet article d'Injection de dépendances dans AngularJs. C diable le par Edureka, une entreprise d'apprentissage en ligne de confiance avec un réseau de plus de 250 000 apprenants satisfaits répartis dans le monde entier.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de cette injection de dépendance dans AngularJs et nous vous répondrons.