Wie kann ich einen AngularJS-Service von der Konsole aus testen?

Question

Ich habe einen Service wie:

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

Ich möchte es aus der JavaScript-Konsole testen und die Funktion f1() des Services aufrufen.

Wie kann ich das tun?

Answer 1

Zusammenfassung: In einer Zeile der Befehl, den Sie suchen:

angular.element(document.body).injector().get('serviceName')

---

Vertiefung

AngularJS verwendet die Dependency Injection (DI), um Dienste/Fabriken in Ihre Komponenten, Direktiven und andere Dienste einzufügen. Also, was Sie tun müssen, um einen Dienst zu erhalten, ist zuerst den injector von AngularJS zu erhalten (der Injector ist dafür verantwortlich, alle Abhängigkeiten zu verknüpfen und sie Komponenten bereitzustellen).

Um den injector Ihrer App zu erhalten, müssen Sie ihn von einem Element abrufen, das Angular behandelt. Wenn Ihre App beispielsweise am body-Element registriert ist, rufen Sie injector = angular.element(document.body).injector() auf

Aus dem abgerufenen injector können Sie dann den gewünschten Dienst mit injector.get('ServiceName') erhalten

Weitere Informationen dazu in dieser Antwort: Kein Zugriff auf den Injector von Angular möglich
Und noch mehr hier: Rufen Sie AngularJS aus Legacy-Code auf

---

Ein weiterer nützlicher Trick, um den $scope eines bestimmten Elements zu erhalten. Wählen Sie das Element mit dem DOM-Inspektionstool Ihrer Entwicklertools aus und führen Sie dann die folgende Zeile aus ($0 ist immer das ausgewählte Element):
angular.element($0).scope()

Answer 2

Zunächst einmal eine modifizierte Version Ihres Dienstes.

a)

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

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

Dies gibt ein Objekt zurück, hier gibt es nichts Neues.

Nun der Weg, um dies aus der Konsole zu erhalten ist:

b)

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

c)

Eines der Dinge, die Sie dort zuvor gemacht haben, war anzunehmen, dass der app.factory Ihnen die Funktion selbst oder eine neue Version davon zurückgibt. Das ist jedoch nicht der Fall. Um einen Konstruktor zu erhalten, müssten Sie entweder Folgendes tun:

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

Dies gibt einen ExampleService Konstruktor zurück, auf den Sie als nächstes ein 'new' anwenden müssen.

Oder alternativ,

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

Dies gibt ein new ExampleService() bei der Injektion zurück.

Answer 3

Die Antwort von @JustGoscha trifft den Nagel auf den Kopf, aber das ist viel zu tippen, wenn ich auf den Zugriff zugreifen möchte. Deshalb habe ich das am Ende meiner app.js hinzugefügt. Dann muss ich nur noch x = getSrv('$http') eingeben, um den http-Dienst zu erhalten.

// @if DEBUG
function getSrv(name, element) {
    element = element || '*[ng-app]';
    return angular.element(element).injector().get(name);
}
// @endif

Es fügt es dem globalen Bereich hinzu, aber nur im Debug-Modus. Ich habe es innerhalb des @if DEBUG platziert, damit es nicht im Produktionscode landet. Ich verwende diese Methode, um Debug-Code aus Produktionsbuilds zu entfernen.

Answer 4

Das Angularjs Dependency Injection-Framework ist dafür verantwortlich, die Abhängigkeiten Ihres App-Moduls in Ihre Controller einzufügen. Dies ist durch seinen Injector möglich.

Sie müssen zuerst das ng-app identifizieren und den zugehörigen Injector erhalten. Die folgende Abfrage funktioniert, um Ihr ng-app im DOM zu finden und den Injector abzurufen.

angular.element('*[ng-app]').injector()

In Chrome können Sie jedoch wie unten gezeigt auf das Ziel ng-app zeigen und den $0 Hack verwenden und angular.element($0).injector() ausführen.

Sobald Sie den Injector haben, können Sie einen beliebigen Dependency-Injection-Service wie folgt abrufen

injector = angular.element($0).injector();
injector.get('$mdToast');