Services avec ES6 (AngularJS)
Je vais avoir des problèmes pour accéder Angulaire intégrée des services tels que $http lors de la création d'un service avec ES6.
Par exemple, je suis de la création d'un "ResultsFinder" de service qui permettra de faire un appel AJAX et puis faire quelques trucs.
Le problème est que je n'ai accès qu'à $http sur le constructeur (si je le passe en argument), mais pas sur d'autres méthodes (telles que getResults).
Voir cet exemple de code:
JS:
(() => {
'use strict';
class ResultsFinder {
constructor($http) {}
getResults() {
return 'ResultsFinder';
}
}
/**
* @ngdoc service
* @name itemManager.service:ResultsFinder
*
* @description
*
*/
angular
.module('itemManager')
.service('ResultsFinder', ResultsFinder);
}());
À l'intérieur de getResults je n'ai pas accès à $http. Pour y avoir accès, je dois faire quelque chose que je ne me sens pas bien comme ça:
JS:
(() => {
'use strict';
class ResultsFinder {
constructor($http) {
this.$http = $http;
}
getResults() {
//Here I have access to this.$http
return 'ResultsFinder';
}
}
/**
* @ngdoc service
* @name itemManager.service:ResultsFinder
*
* @description
*
*/
angular
.module('itemManager')
.service('ResultsFinder', ResultsFinder);
}());
Quelqu'un peut me donner quelques conseils sur la bonne façon de gérer cela?
- C'est la façon dont la classe fonctionne, vous devez définir vos propriétés dans le constructeur et l'accès à d'autres méthodes. Il n'y a rien de mal à le faire.
- Puis c'est la propper façon de créer des services? Je trouve bizarre d'avoir accès à "global services" avec ce.$service.
- Le service n'est pas global. C'est un membre de la classe. Dans les navigateurs les variables globales sont des propriétés de
window
.window.$http.get("/")
serait invalide. Avec la Machine, vous seriez capable d'annoter le membreprivate
.
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser
this.$http
à l'intérieur de votregetResults
méthode.JS:
Comme une note de côté, j'ai ajouté un statique
$inject
"annotation" pour votre classe. C'est une bonne pratique si vous n'êtes pas en utilisant quelque chose comme ngAnnotate. Il rend également plus facile de changer implémentations en changeant seulement le$inject
valeurs.Si vous êtes un ES5 développeur, il peut aider à réfléchir à comment ce serait un look dans l'ES5
NOTE
Puisque vous utilisez ES6, doit probablement utiliser ES6 modules pour organiser votre code.
Vous définissez et l'exportation de votre angulaires-le module à l'intérieur d'un ES6 module:
Ensuite importer le module Angulaire
uglified
ouminified
le paramètre de la fonction$http
sera remplace par quelque chose comme:a
. Angulaire ne savent pas ce qu'service à injecter à ce point. C'est là que$inject
vient dans. C'est typiquement un problème qui est vu une fois le code est livré à l'assurance qualité ou de PROD.$http
plutôt quehttp
.MyController.$inject = ['ResultsFinder'];
.this.$http
parce qu'alors, que devient trucs en dehors du service. Quelqu'un pourrait ensuite utiliserResultsFinder.$http
- je suis d'accord, cela ne se sent pas le droit. D'autres solutions?