Mam taką usługę jak:

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

Chciałbym przetestować go z konsoli JavaScript i wywołać funkcję f1()usługi.

Jak mogę to zrobić?

TLDR: W jednej linii szukasz polecenia:

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

Głębokie nurkowanie

AngularJS używa Dependency Injection (DI) do wstrzykiwania usług / fabryk do komponentów, dyrektyw i innych usług. Aby więc uzyskać usługę, musisz najpierw pobrać wtryskiwacz AngularJS (wtryskiwacz jest odpowiedzialny za połączenie wszystkich zależności i dostarczenie ich do komponentów).

Aby uzyskać wtryskiwacz aplikacji, musisz pobrać go z elementu, który obsługuje kąt. Na przykład, jeśli Twoja aplikacja jest zarejestrowana w elemencie ciała, do którego dzwoniszinjector = angular.element(document.body).injector()

Po odzyskaniu injectormożesz uzyskać dowolną usługęinjector.get('ServiceName')

Więcej informacji na ten temat w tej odpowiedzi: Nie można pobrać wtryskiwacza z kątownika
I jeszcze więcej tutaj: Zadzwoń do AngularJS ze starszego kodu

Kolejna przydatna sztuczka pozwalająca uzyskać $scopeokreślony element. Wybierz element za pomocą narzędzia inspekcji DOM narzędzi programistycznych, a następnie uruchom następującą linię ( $0zawsze jest wybranym elementem):
angular.element($0).scope()

Przede wszystkim zmodyfikowana wersja twojej usługi.

a)

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

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

Zwraca obiekt, nic nowego.

Teraz sposobem na uzyskanie tego z konsoli jest

b )

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

c)

Jedną z rzeczy, które robiłeś tam wcześniej, było założenie, że fabryka aplikacji zwraca ci samą funkcję lub jej nową wersję. Co nie jest prawdą. Aby uzyskać konstruktora, musiałbyś to zrobić

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

Zwraca to konstruktor ExampleService, na którym będziesz musiał zrobić „nowy”.

Lub alternatywnie

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

Zwraca to nową ExampleService () po wstrzyknięciu.

@ Odpowiedź JustGoscha jest natychmiastowa, ale to dużo do wpisania, gdy chcę uzyskać dostęp, więc dodałem to na dole mojej aplikacji.js. Następnie wszystko, co muszę wpisać, to x = getSrv('$http')uzyskać usługę http.

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

Dodaje to do zasięgu globalnego, ale tylko w trybie debugowania. Umieszczam go wewnątrz @if DEBUG, aby nie skończyć z kodem produkcyjnym. Używam tej metody do usuwania kodu debugowania z kompilacji dumy.

Struktura Angularjs Dependency Injection jest odpowiedzialna za wstrzyknięcie kontrolerom zależności twojego modułu aplikacji. Jest to możliwe dzięki wtryskiwaczowi.

Musisz najpierw zidentyfikować aplikację ng i uzyskać powiązany wtryskiwacz. Poniższe zapytanie działa, aby znaleźć twoją aplikację ng w DOM i pobrać wtryskiwacz.

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

W wersji chromowanej możesz jednak wskazać docelową aplikację ng, jak pokazano poniżej. i użyj $0hacka i problemuangular.element($0).injector()

Gdy masz już wtryskiwacz, skorzystaj z usługi wstrzykiwania zależności, jak poniżej

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