Comment puis-je tester un un AngularJS service à partir de la console?

Question

J'ai un service comme:

angular.module('app').factory('ExampleService', function(){
  this.f1 = function(world){
    return 'Hello '+world;
  }
  return this;
})

Je voudrais tester la console JavaScript et appeler la fonction f1() du service.

Comment puis-je le faire?

Answer 1

Donc, j'ai découvert que vous ne pouvez pas simplement appeler angular.injector(['app']) si il existe déjà un injecteur. Parce que cette fonction tente de créer un nouvel injecteur.

Au lieu de cela, vous devez appeler injector = angular.element(document.body).injector()

À partir de l'extrait injector vous pouvez obtenir n'importe quel service que vous aimez avec des injector.get('ServiceName')

Ainsi, dans une ligne de commande, la commande devrait ressembler à ceci: angular.element(document.body).injector().get('serviceName')

Plus d'informations sur ce dans cette réponse: impossible de récupérer l'injecteur angulaires
Et encore plus ici: Appel Angular JS de code legacy

Answer 2

Tout d'abord, une version modifiée de votre service.

a )

var app = angular.module('app',[]);

app.factory('ExampleService',function(){
    return {
        f1 : function(world){
            return 'Hello' + world;
        }
    };
});

Ceci renvoie à un objet, rien de nouveau ici.

Maintenant, la façon d'obtenir ce à partir de la console

b )

var $inj = angular.injector(['app']);
var serv = $inj.get('ExampleService');
serv.f1("World");

c )

L'une des choses que vous faisiez au début a été de considérer que l'application.usine vous renvoie la fonction elle-même ou un nouveau ed version de celui-ci. Ce qui n'est pas le cas. Afin d'obtenir un constructeur vous avez à faire

app.factory('ExampleService',function(){
        return function(){
            this.f1 = function(world){
                return 'Hello' + world;
            }
        };
    });

Il renvoie un ExampleService constructeur qui vous permettra ensuite d'avoir à faire un "nouveau".

Ou sinon,

app.service('ExampleService',function(){
            this.f1 = function(world){
                return 'Hello' + world;
            };
    });

Ceci renvoie à nouveau ExampleService() sur l'injection.

Answer 3

@JustGoscha la réponse est sur place, mais c'est beaucoup pour type, quand je veux accéder, j'ai donc ajouté cette à la fond de mon app.js. Ensuite, tout ce que j'ai à taper 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 ajoute à la portée mondiale, mais seulement en mode de débogage. Je l'ai mis à l'intérieur de l' @if DEBUG , de sorte que je ne pas finir dans le code de production. J'ai utiliser cette méthode pour supprimer le code de débogage à partir de prouduction construit.