¿Cómo puedo probar un servicio AngularJS desde la consola?

395

Tengo un servicio como:

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

Me gustaría probarlo desde la consola de JavaScript y llamar a la función f1()del servicio.

¿Cómo puedo hacer eso?

JustGoscha
fuente

Respuestas:

713

TLDR: en una línea, el comando que está buscando:

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

Bucear profundo

AngularJS utiliza la inyección de dependencia (DI) para inyectar servicios / fábricas en sus componentes, directivas y otros servicios. Entonces, lo que debe hacer para obtener un servicio es obtener primero el inyector de AngularJS (el inyector es responsable de conectar todas las dependencias y proporcionarlas a los componentes).

Para obtener el inyector de su aplicación, debe tomarlo de un elemento que está manejando angular. Por ejemplo, si su aplicación está registrada en el elemento del cuerpo al que llamainjector = angular.element(document.body).injector()

Desde lo recuperado injector, puede obtener el servicio que desee coninjector.get('ServiceName')

Más información al respecto en esta respuesta: no se puede recuperar el inyector de angular
Y aún más aquí: llame a AngularJS desde el código heredado


Otro truco útil para obtener el $scopede un elemento en particular. Seleccione el elemento con la herramienta de inspección DOM de sus herramientas de desarrollador y luego ejecute la siguiente línea ( $0siempre es el elemento seleccionado):
angular.element($0).scope()

JustGoscha
fuente
70
También tuve que hacer esto para que funcione. Por cierto, angular.element('*[ng-app]').injector()debería funcionar para todos los casos.
Francesc Rosas
44
Si obtiene el error 'selectores no implementados' al ejecutar angular.element ('html'), entonces puede usar la función Chrome $ 0. Seleccione el elemento html, vaya a la consola y ejecute angular.element ($ 0) .injector ()
Marek
99
documenttambién funciona:angular.element(document).injector().get('serviceName')
Tamlyn
1
FYI Tuve que usar document.body en Chrome
Kevin
55
Para su información, quería usar el servicio $ location, pero eventualmente tuve que envolverlo en scope.apply. Sé que esto está bien documentado, pero se me ha olvidado. En una línea angular.element (document) .scope (). $ Apply (angular.element (document) .injector (). Get ('$ location'). Path ('/ my / angular / url'))
acid_crucifix
25

En primer lugar, una versión modificada de su servicio.

una )

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

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

Esto devuelve un objeto, nada nuevo aquí.

Ahora la forma de obtener esto de la consola es

b)

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

C )

Una de las cosas que estaba haciendo allí anteriormente era suponer que app.factory le devuelve la función en sí o una versión nueva. Que no es el caso. Para obtener un constructor tendrías que hacer

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

Esto devuelve un constructor ExampleService en el que luego tendrá que hacer un 'nuevo'.

O alternativamente,

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

Esto devuelve el nuevo ExampleService () en la inyección.

ganaraj
fuente
3
cuando lo hago, var $inj = angular.injector(['app']);entonces la consola lanza una Error: Unknown provider: $filterProvider from appaplicación en una y Error: Unknown provider: $controllerProvider from appotra aplicación ...
JustGoscha
@JustGoscha ¿Cómo está configurada su aplicación? es decir, cómo funciona una línea (que se parece) var app = angular.module ('app', []); parecerse en su aplicación.
ganaraj
No entiendo completamente la pregunta ... se ve como usted dice angular.module('app',[]);y luego hay servicios, controladores, etc. en diferentes archivos y todos están definidos como, angular.module('app').factory('FeatureRegistry',function(){//code here});por ejemplo
JustGoscha
@JustGoscha Esto es lo que hice para probar. Fui a docs.angularjs.org/api en Chrome. Abrí la consola. Escribí el código en la sección a de mi respuesta y luego escribí el código en la sección b .. Deberías ver Hello World ... ¿Puedes intentar eso?
ganaraj
14

La respuesta de @ JustGoscha es acertada, pero es mucho para escribir cuando quiero acceder, así que agregué esto al final de mi app.js. Entonces todo lo que tengo que escribir es x = getSrv('$http')obtener el servicio http.

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

Lo agrega al alcance global pero solo en modo de depuración. Lo puse dentro @if DEBUGpara que no termine con él en el código de producción. Utilizo este método para eliminar el código de depuración de las compilaciones de producción.

codificador de barcos
fuente
4

El marco de inyección de dependencia de Angularjs es responsable de inyectar las dependencias de su módulo de aplicación a sus controladores. Esto es posible a través de su inyector.

Primero debe identificar la aplicación ng y obtener el inyector asociado. La consulta a continuación funciona para encontrar su aplicación ng en el DOM y recuperar el inyector.

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

En Chrome, sin embargo, puede apuntar a ng-app como se muestra a continuación. y usa el $0truco y el problemaangular.element($0).injector()

Una vez que tenga el inyector, obtenga cualquier servicio inyectado de dependencia como se muestra a continuación

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

ingrese la descripción de la imagen aquí

Faiz Mohamed Haneef
fuente