Providers dans AngularJS
- Fournisseurs dans AngularJS
-
Différence entre
ProvideretFactorydans AngularJS - Différence entre fournisseur et service dans AngularJS
Nous présenterons les fournisseurs dans AngularJS et les différences entre provider, factory et service dans AngularJS.
Fournisseurs dans AngularJS
Les fournisseurs sont un type de service. La fonction provider() permet de créer un service paramétrable contenant la méthode $get.
Imaginons la création d’une application Web qui utilise des API ; si nous devons définir une clé API pour accéder aux données de l’API dans notre application, nous pouvons la définir dans la configuration module et transmettre l’entrée au fournisseur à l’aide du service $provide.
Créons un module avec un fournisseur qui renverra une valeur lorsqu’un contrôleur appelle le fournisseur. Tout d’abord, nous allons ajouter la bibliothèque AngularJS et le fichier app.js en utilisant les balises script.
# AngularJS
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="app.js"></script>
</head>
Nous définirons l’application AngularJS en utilisant ng-app et le contrôleur en utilisant ng-controller.
# AngularJS
<body ng-app="myApp">
<div ng-controller="myController"></div>
</body>
Dans app.js, nous allons créer notre module.
# AngularJS
var module = angular.module("myApp", []);
Nous utiliserons un provider; les fournisseurs font comme leur nom l’indique, c’est-à-dire qu’ils fournissent des valeurs, donc dans ce cas, nous fournirons une valeur de chaîne. Le fournisseur a une méthode définie : $get.
Le fournisseur peut avoir plusieurs méthodes, mais les appels Angular sont $get. Nous allons donc assigner une fonction à la méthode $get qui retournera une valeur de chaîne.
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
return "Value from Provider";
};
});
Nous allons injecter le provider dans notre contrôleur et console.log() la valeur du provider.
# AngularJS
module.controller("myController", function(myProvider){
console.log(myProvider);
});
Production:
Comme le montre l’exemple ci-dessus, nous avons obtenu la valeur exacte du fournisseur dans notre console. Cela a donc fonctionné et nous pouvons utiliser un fournisseur pour renvoyer une valeur et l’injecter dans notre méthode.
Il est important de noter qu’il est vrai que tous les fournisseurs sont tous les mêmes et que le service et l’usine sont également les mêmes. Mais peu importe le nombre de fois que nous injectons le fournisseur, la valeur ne sera exécutée qu’une seule fois.
Nous pouvons le tester en créant un autre contrôleur, comme indiqué ci-dessous.
# AngularJS
module.controller("myController", function(myProvider){
console.log("First Controller:" + myProvider);
});
module.controller("myController2", function(myProvider){
console.log("Second Controller:" + myProvider);
});
Nous utiliserons console.log() dans la méthode $get de notre fournisseur pour enregistrer une valeur dans le fournisseur. Ainsi, chaque fois que ce fournisseur est exécuté, il enregistre la même valeur.
De cette façon, nous pouvons vérifier si notre fournisseur est exécuté une ou deux fois.
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
console.log("Provider Executed!")
return "Value from Provider";
};
});
Ajoutons div pour notre deuxième contrôleur dans index.html.
# AngularJS
<div ng-controller="myController"></div>
<div ng-controller="myController2"></div>
Production:
L’exemple ci-dessus montre que le fournisseur n’est exécuté qu’une seule fois, mais que la valeur du fournisseur est injectée dans les deux contrôleurs. Nous avons reçu deux messages de sortie de nos contrôleurs.
Il est important de noter qu’Angular l’exécute lorsqu’un fournisseur est injecté, appelle $get et store et se souvient de cette valeur. Chaque fois que le fournisseur est injecté, il renvoie la valeur qu’il a extraite la première fois.
Différence entre Provider et Factory dans AngularJS
Créons une usine avec les mêmes fonctionnalités que le fournisseur que nous avons créé. Maintenant, nous allons copier notre fournisseur et le changer en factory.
La fabrique n’a pas de méthode $get, nous allons donc appeler directement la fonction dans notre fabrique et retourner une valeur. C’est la seule partie qui diffère du fournisseur.
Nous injecterons notre usine dans les deux contrôleurs. Notre code dans app.js ressemblera à ci-dessous.
# AngularJS
var module = angular.module("myApp", []);
module.factory("myFactory", function(){
console.log("Factory Executed!")
return "Value from Factory";
});
module.controller("myController", function(myFactory){
console.log("First Controller:" + myFactory);
});
module.controller("myController2", function(myFactory){
console.log("Second Controller:" + myFactory);
});
Production:
Comme le montre l’exemple ci-dessus, nous obtenons les mêmes résultats. Les fournisseurs et l’usine font la même chose, mais une factory peut le faire en un peu moins de code.
Différence entre fournisseur et service dans AngularJS
Créons un service avec les mêmes fonctionnalités que le fournisseur que nous avons créé. Nous allons maintenant copier notre fournisseur et le changer en service.
Le service n’a pas de méthode $get, nous allons donc appeler directement la fonction dans notre service de la même manière que l’usine et renvoyer une valeur. C’est la seule partie qui diffère du fournisseur.
Nous allons injecter notre service dans les deux contrôleurs. Notre code dans app.js ressemblera à ci-dessous.
# AngularJS
var module = angular.module("myApp", []);
module.service("myService", function(){
console.log("Service Executed!");
this.getValue = function(){
return "Object from Service";
}
});
module.controller("myController", function(myService){
console.log("First Controller:" + myService.getValue());
});
module.controller("myController2", function(myService){
console.log("Second Controller:" + myService.getValue());
});
Production:
Comme le montre l’exemple ci-dessus, nous obtenons les mêmes résultats. Les fournisseurs et le service font la même chose, mais le service renvoie un objet au lieu d’une chaîne.
Le point principal est de savoir quand utiliser un provider, factory, et service. Si on veut retourner une valeur au lieu d’un objet, on ne peut pas utiliser un service.
Nous devons utiliser une factory au lieu d’un service, mais nous utiliserons une factory pour retourner un objet au lieu d’une valeur. Le provider nous donne accès au moment de la configuration.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn