¿Cómo puedo probar un servicio AngularJS desde la consola?
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 JavaScript y llamar a la función f1() del servicio.
¿Cómo puedo hacer eso?
4 answers
TLDR: En una línea el comando que está buscando:
angular.element(document.body).injector().get('serviceName')
Inmersión profunda
AngularJS usa Dependency Injection (DI) para inyectar servicios/fábricas en sus componentes,directivas y otros servicios. Así que lo que necesita hacer para obtener un servicio es obtener el inyector de AngularJS primero (el inyector es responsable de cablear todas las dependencias y proporcionarlas a los componentes).
Para obtener el inyector de su aplicación necesitas agarrarlo de un elemento que angular está manejando. Por ejemplo, si tu app está registrada en el elemento body que llamas injector = angular.element(document.body).injector()
Desde el recuperado injector puede obtener el servicio que desee con injector.get('ServiceName')
Más información sobre eso 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 un elemento en particular.
Seleccionar 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()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-27 19:34:14
En primer lugar, una versión modificada de su servicio.
A)
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 aplicación.factory le devuelve la función en sí o una nueva versión de la misma. Lo cual no es el caso. Con el fin de obtener un constructor que tendría que hacer
app.factory('ExampleService',function(){
return function(){
this.f1 = function(world){
return 'Hello' + world;
}
};
});
Esto devuelve un ExampleService constructor que a continuación tendrá que hacer un 'nuevo' en.
O alternativamente,
app.service('ExampleService',function(){
this.f1 = function(world){
return 'Hello' + world;
};
});
Esto devuelve la nueva ExampleService() en la inyección.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-20 17:12:57
La respuesta de@JustGoscha es acertada, pero eso es mucho para escribir cuando quiero acceso, así que agregué esto al final de mi aplicación.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 pongo dentro del @if DEBUG para que no termine con él en el código de producción. Uso este método para eliminar el código de depuración de las compilaciones de prouduction.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:03:05
Angularjs Dependency Injection framework 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 el ng-app y obtener el inyector asociado. La siguiente consulta funciona para encontrar su ng-app en el DOM y recuperar el inyector.
angular.element('*[ng-app]').injector()
En Chrome, sin embargo, puede apuntar a ng-app objetivo como se muestra a continuación. y utilizar el $0 hack and issue angular.element($0).injector()
Una vez que tenga la inyector, consiga cualquier servicio inyectado dependencia como abajo
injector = angular.element($0).injector();
injector.get('$mdToast');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-29 11:19:01