Jak Mogę przetestować usługę AngularJS z konsoli?

Mam taki serwis 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() serwisu.

Jak mogę to zrobić?
Author: Matt, 2013-03-20
Source

4 answers

TLDR: w jednej linii Komenda, której szukasz: 

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

Deep dive

AngularJS używa Dependency Injection (DI) do wstrzykiwania usług / fabryk do komponentów, dyrektyw i innych usług. Aby uzyskać usługę, należy najpierw uzyskać wtryskiwacz firmy AngularJS (wtryskiwacz jest odpowiedzialny za okablowanie wszystkich zależności i dostarczenie ich do komponentów).

Aby uzyskać wtryskiwacz Twojej aplikacji musisz go chwycić z elementu, który obsługuje angular. Na przykład, jeśli aplikacja jest zarejestrowana na elemencie body, który wywołujesz injector = angular.element(document.body).injector()

Z odzyskanego injector możesz następnie uzyskać dowolną usługę z injector.get('ServiceName')

Więcej informacji na ten temat w tej odpowiedzi: nie można pobrać wtryskiwacza z kąta
A jeszcze więcej tutaj: wywołaj AngularJS z kodu źródłowego

Kolejna przydatna sztuczka, aby uzyskać $scope określonego elementu. Wybierz element z DOM inspection tool twoich narzędzi programistycznych, a następnie uruchom następującą linię ($0 jest zawsze zaznaczonym elementem):
angular.element($0).scope()

 649
Author: JustGoscha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-27 19:34:14

Po pierwsze, zmodyfikowana wersja twojego serwisu.

A) 

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

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

To zwraca obiekt, nic nowego tutaj.

Teraz sposób, aby uzyskać to 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 aplikacja.factory zwraca ci samą funkcję lub jej nową wersję. Co nie jest prawdą. Aby uzyskać konstruktor, musisz wykonać 
app.factory('ExampleService',function(){
        return function(){
            this.f1 = function(world){
                return 'Hello' + world;
            }
        };
    });

To zwraca Przykładowy konstruktor, na którym będziesz musiał wykonać 'nowe'.

Lub alternatywnie, 

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

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

 23
Author: ganaraj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-20 17:12:57

@JustGoscha odpowiedź jest na miejscu, ale to dużo pisać, gdy chcę dostępu, więc dodałem to na dole mojej aplikacji.js. Następnie wystarczy wpisać x = getSrv('$http'), Aby uzyskać usługę http.

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

Dodaje go do globalnego zakresu, ale tylko w trybie debugowania. Umieściłem go wewnątrz @if DEBUG, aby nie skończyć z nim w kodzie produkcyjnym. używam tej metody do usuwania kodu debugowania z kompilacji prouduction.

 12
Author: boatcoder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:05

Angularjs Dependency Injection framework jest odpowiedzialny za wstrzykiwanie zależności modułu aplikacji do kontrolerów. Jest to możliwe dzięki wtryskiwaczowi.

Najpierw musisz zidentyfikować ng-app i pobrać odpowiedni wtryskiwacz. Poniższe zapytanie działa, aby znaleźć swoją aplikację ng-app w DOM i pobrać wtryskiwacz.

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

W chrome możesz jednak wskazać cel ng-app, jak pokazano poniżej. i użyj $0 hack and issue angular.element($0).injector()

Gdy masz wtryskiwacz, uzyskaj dowolną usługę iniekcji zależności jak poniżej 

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

Tutaj wpisz opis obrazka

 2
Author: Faiz Mohamed Haneef,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-29 11:19:01