Como posso testar um serviço AngularJS no console?

Eu tenho um serviço como:

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

Eu gostaria de testá-lo no console JavaScript e chamar a function f1() do serviço.

Como eu posso fazer isso?

TLDR: Em uma linha, o comando que você está procurando:

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

Mergulho profundo

O AngularJS usa Injeção de Dependência (DI) para injetar serviços / fábricas em seus componentes, diretivas e outros serviços. Então, o que você precisa fazer para obter um serviço é obter o injetor do AngularJS primeiro (o injetor é responsável por conectar todas as dependencies e fornecê-las aos componentes).

Para obter o injetor do seu aplicativo, você precisa pegá-lo de um elemento que o angular esteja manipulando. Por exemplo, se seu aplicativo estiver registrado no elemento body, você chama injector = angular.element(document.body).injector()

A partir do injector recuperado, você pode obter qualquer serviço que desejar com injector.get('ServiceName')

Mais informações sobre isso nesta resposta: Não é possível recuperar o injetor de forma angular
E ainda mais aqui: chame o AngularJS a partir do código legado


Outro truque útil para obter o $scope de um elemento específico. Selecione o elemento com a ferramenta de inspeção DOM de suas ferramentas de desenvolvedor e, em seguida, execute a seguinte linha ( $0 é sempre o elemento selecionado):
angular.element($0).scope()

Primeiro de tudo, uma versão modificada do seu serviço.

a )

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

Isso retorna um object, nada para novo aqui.

Agora, a maneira de obter isso do console é

b)

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

c)

Uma das coisas que você fazia lá anteriormente era assumir que o app.factory retorna a function em si ou uma versão nova dela. O que não é o caso. Para obter um construtor, você teria que fazer

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

Isso retorna um construtor ExampleService, no qual você terá que fazer um ‘novo’.

Ou alternativamente,

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

Isso retorna um novo ExampleService () na injeção.

@ A resposta de JustGoscha está correta, mas é muito o que digitar quando quero access, então adicionei isso ao final do meu app.js. Então tudo que eu tenho que digitar é x = getSrv('$http') para obter o serviço http.

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

Adiciona-o ao escopo global, mas apenas no modo de debugging. Eu coloquei dentro do @if DEBUG para que eu não termine com isso no código de produção. Eu uso esse método para remover o código de debugging das compilações prouduction.

O framework Angularjs Dependency Injection é responsável por injetar as dependencies do seu módulo de aplicativo em seus controladores. Isso é possível através de seu injetor.

Você precisa primeiro identificar o ng-app e obter o injetor associado. A consulta abaixo funciona para encontrar seu ng-app no ​​DOM e recuperar o injetor.

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

No Chrome, no entanto, você pode apontar para o ng-app como mostrado abaixo. e use o $0 hack e angular.element($0).injector()

Depois de ter o injetor, obtenha qualquer serviço de injeção de dependência como abaixo

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

insira a descrição da imagem aqui