Comment implémenter l'injection de dépendances dans AngularJs

Cet article vous fournira une connaissance détaillée et complète de la mise en œuvre de l'injection de dépendances dans AngularJs.

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

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 valeur produit 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:

injection de dépendance dans angularjs

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.