Comment puis-je tester un service AngularJS à partir de la console?
J'ai un service comme:
angular.module('app').factory('ExampleService', function(){
this.f1 = function(world){
return 'Hello '+world;
}
return this;
})
Je voudrais le tester depuis la console JavaScript et appeler la fonction f1() du service.
Comment puis je faire ça?
TLDR: En une ligne la commande que vous recherchez:
angular.element(document.body).injector().get('serviceName')
Plongée profonde
AngularJS utilise Injection de dépendance (DI) pour injecter des services/usines dans vos composants, directives et autres services. Donc ce que vous devez faire pour obtenir un service est d’obtenir d’abord le injecteur d’AngularJS (l’injecteur est responsable du câblage de toutes les dépendances et de leur fourniture aux composants).
Pour obtenir l'injecteur de votre application, vous devez le saisir à partir d'un élément géré par angular. Par exemple, si votre application est enregistrée sur l'élément body, appelez injector = angular.element(document.body).injector().
À partir de injector récupéré, vous pouvez obtenir le service de votre choix avec injector.get('ServiceName').
Plus d'informations à ce sujet dans cette réponse: Impossible de récupérer l'injecteur d'angular
Et plus encore ici: Appelez AngularJS à partir du code hérité
Une autre astuce utile pour obtenir le $scope d'un élément particulier. Sélectionnez l'élément avec l'outil d'inspection DOM de vos outils de développement, puis exécutez la ligne suivante ($0 est toujours l'élément sélectionné):angular.element($0).scope()
Tout d'abord, une version modifiée de votre service.
une )
var app = angular.module('app',[]);
app.factory('ExampleService',function(){
return {
f1 : function(world){
return 'Hello' + world;
}
};
});
Cela retourne un objet, rien de nouveau ici.
Maintenant, le moyen d'obtenir ceci à partir de la console est
b)
var $inj = angular.injector(['app']);
var serv = $inj.get('ExampleService');
serv.f1("World");
c)
Une des choses que vous faisiez là-bas était de supposer que app.factory vous renvoie la fonction elle-même ou une nouvelle version de celle-ci. Ce qui n'est pas le cas. Pour obtenir un constructeur, vous devez soit faire
app.factory('ExampleService',function(){
return function(){
this.f1 = function(world){
return 'Hello' + world;
}
};
});
Cela retourne un constructeur ExampleService sur lequel vous devrez ensuite faire un "nouveau".
Ou bien,
app.service('ExampleService',function(){
this.f1 = function(world){
return 'Hello' + world;
};
});
Cela renvoie new ExempleService () à l'injection.
La réponse de @ JustGoscha est parfaite, mais c'est beaucoup de choses à taper quand je veux un accès, alors j'ai ajouté ceci au bas de mon application.js. Ensuite, tout ce que je dois taper est x = getSrv('$http') pour obtenir le service http.
// @if DEBUG
function getSrv(name, element) {
element = element || '*[ng-app]';
return angular.element(element).injector().get(name);
}
// @endif
Il l'ajoute à la portée globale mais uniquement en mode débogage. Je le mets dans le @if DEBUG afin que je ne le retrouve pas dans le code de production. J'utilise cette méthode pour supprimer le code de débogage dans les versions d'Overuction.
Le framework Angularjs Dependency Injection est responsable de l’injection des dépendances de votre module applicatif à vos contrôleurs. Ceci est possible grâce à son injecteur.
Vous devez d'abord identifier le ng-app et obtenir l'injecteur associé. La requête ci-dessous permet de trouver votre ng-app dans le DOM et de récupérer l'injecteur.
angular.element('*[ng-app]').injector()
En chrome, cependant, vous pouvez pointer sur la cible ng-app comme indiqué ci-dessous. et utilisez le $0 hack et lancez angular.element($0).injector()
Une fois que vous avez l'injecteur, obtenez un service d'injection de dépendance comme indiqué ci-dessous
injector = angular.element($0).injector();
injector.get('$mdToast');
