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

У меня есть сервис вроде:

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

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

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

Ответ 1

Итак, я узнал, что вы не можете просто называть angular.injector(['app']), если уже существует инжектор. Поскольку эта функция пытается создать новый инжектор.

Вместо этого вам нужно позвонить injector = angular.element(document.body).injector()

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

Итак, в одной строке команда будет выглядеть так:

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

Подробнее об этом в этом ответе: Не удается получить инжектор из angular
И даже здесь: Вызвать Angular JS из устаревшего кода

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

Ответ 2

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

a)

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

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

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

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

b)

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

c)

Одна из вещей, которую вы делали раньше, заключалась в том, чтобы предположить, что app.factory возвращает вам сама функция или ее новая версия. Это не так. Чтобы получить конструктор, вам нужно либо сделать

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() при инъекции.

Ответ 3

@JustGoscha ответ, но это много, чтобы напечатать, когда я хочу получить доступ, поэтому я добавил это к нижней части моего app.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, чтобы я не закончил его в производственном коде. Я использую этот метод для удаления кода отладки из сборников гордости.