simple - Come posso testare un servizio AngularJS dalla console?




simple angularjs project download (3)

Ho un servizio come:

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

Vorrei testarlo dalla console JavaScript e chiamare la funzione f1() del servizio.

Come lo posso fare?


TLDR: in una riga il comando che stai cercando:

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

Profonda immersione

AngularJS utilizza Dependency Injection (DI) per iniettare servizi / fabbriche nei componenti, direttive e altri servizi. Quindi quello che devi fare per ottenere un servizio è quello di ottenere prima l' iniettore di AngularJS (l'iniettore è responsabile del cablaggio di tutte le dipendenze e della loro fornitura ai componenti).

Per ottenere l' iniettore della tua app devi prenderlo da un elemento angolare. Ad esempio se la tua app è registrata sull'elemento body che chiami injector = angular.element(document.body).injector()

Dall'iniettore recuperato puoi quindi ottenere qualsiasi servizio ti piaccia con injector.get('ServiceName')

Maggiori informazioni su questo in questa risposta: Impossibile recuperare l'iniettore da angolare
E ancora di più qui: Chiama AngularJS dal codice legacy

Un altro trucco utile per ottenere l' $scope di un particolare elemento. Seleziona l'elemento con lo strumento di ispezione DOM degli strumenti di sviluppo, quindi esegui la seguente riga ( $0 è sempre l'elemento selezionato):
angular.element($0).scope()


@ La risposta di JustGoscha è azzeccata, ma è molto da digitare quando voglio accedere, quindi l'ho aggiunto alla parte inferiore della mia app.js. Quindi tutto ciò che devo digitare è x = getSrv('$http') per ottenere il servizio http.

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

Lo aggiunge all'ambito globale ma solo in modalità di debug. Lo metto dentro @if DEBUG modo da non finire nel codice di produzione. Io uso questo metodo per rimuovere il codice di debug dalle build di prouduction.


Prima di tutto, una versione modificata del tuo servizio.

a)

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

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

Questo restituisce un oggetto, niente di nuovo qui.

Ora il modo per ottenere questo dalla console è

b)

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

c)

Una delle cose che stavi facendo in precedenza era assumere che app.factory ti restituisse la funzione stessa o una versione nuova di esso. Che non è il caso Per ottenere un costruttore dovresti farlo

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

Questo restituisce un costruttore di ExampleService su cui dovrai fare un "nuovo".

O in alternativa,

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

Questo restituisce un nuovo ExampleService () durante l'iniezione.





angularjs-service