Как я могу проверить службу AngularJS с консоли?

у меня есть такой сервис, как:

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

Я хочу проверьте его из консоли JavaScript и вызвать функцию f1() службы.

Как я могу это сделать?

4 369
angularjs angularjs-service

4 ответа:

TLDR: In одна строка команда, которую вы ищете:

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

глубокое погружение

в AngularJS использует инъекция зависимостей (DI) впрыснуть обслуживания / фабрики в ваши компоненты,директивы и другие обслуживания. Так что вам нужно сделать, чтобы получить услугу, чтобы получить инжектор of AngularJS first (инжектор отвечает за подключение всех зависимостей и их предоставление комплектующие.)

для получения инжектор вашего приложения вам нужно захватить его из элемента, который угловой обрабатывает. Например, если ваше приложение зарегистрировано в элементе body, который вы вызываете injector = angular.element(document.body).injector()

из полученных injector вы можете получить любую услугу, которую вы любите с injector.get('ServiceName')

более подробная информация об этом в этом ответе:не удается извлечь инжектор из углового
И даже больше здесь:Вызов AngularJS из унаследованного кода

еще один полезный трюк, чтобы получить $scope конкретного элемента. Выберите элемент с помощью DOM инспекционный инструмент ваших инструментов разработчика, а затем запустите следующую строку ( всегда выбранный элемент):
angular.element().scope()

649

прежде всего, модифицированная версия вашего сервиса.

a)

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

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

Это возвращает объект, ничего нового здесь нет.

теперь способ получить это из консоли

б )

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

c)

одна из вещей, которые вы делали там раньше, состояла в том, чтобы предположить, что приложение.фабрика возвращает вам саму функцию или ее новую версию. Но это не так. Для того, чтобы получить конструктор вы бы либо придется сделать 

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

Это возвращает конструктор ExampleService, который вам затем нужно будет сделать "новым".

или

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

Это возвращает новые ExampleService () на инъекции.

23

@Justgoscha's answer is spot on, но это много, чтобы ввести, когда я хочу получить доступ, поэтому я добавил Это в нижней части моего приложения.js. Тогда все, что мне нужно напечатать-это x = getSrv('$http') чтобы получить службу http.

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

Он добавляет его в глобальную область, но только в режиме отладки. Я положил его внутрь @if DEBUG Так что я не в конечном итоге с ним в производственном коде. Я использую этот метод, чтобы удалить отладочный код из prouduction строит.

12

AngularJS Dependency Injection framework отвечает за инъекцию зависимостей вашего модуля приложения к вашим контроллерам. Это возможно через свой инжектор.

вам нужно сначала определить ng-приложение и получить соответствующий инжектор. Приведенный ниже запрос работает, чтобы найти ваше ng-приложение в DOM и получить инжектор.

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

в chrome, однако, вы можете указать на целевой ng-приложение, как показано ниже. и использовать взломать и выдать angular.element().injector()

как только вы имеете инжектор, получите любое обслуживание впрыснутое зависимостью как ниже

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

enter image description here

2