angularjs - open - ng-bind-html

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

Question

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?

Answer 1

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 cablear todas las dependencias y proporcionarlas a los componentes).

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

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

Más información sobre esto 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 $scope de $scope de 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 ( $0 es siempre el elemento seleccionado):
angular.element($0).scope()

Answer 2

El marco de inyección de dependencias 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 siguiente consulta funciona para encontrar su aplicación ng en el DOM y recuperar el inyector.

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

Sin embargo, en Chrome, puede apuntar a la aplicación ng como se muestra a continuación. y usa el hack $0 y emite angular.element($0).injector()

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

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

Answer 3

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 desde 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í antes era asumir que la app.factory le devuelve la función en sí misma o una nueva versión de la misma. Que no es el caso. Para conseguir un constructor deberías hacer

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

Esto devuelve un constructor ExampleService que a continuación tendrá que hacer un ''nuevo''.

O alternativamente,

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

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

Answer 4

La respuesta de @JustGoscha es acertada, pero eso 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'') para 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 ámbito global pero solo en modo de depuración. Lo puse dentro del @if DEBUG para que no termine en el código de producción. Utilizo este método para eliminar el código de depuración de las versiones de prouduction.