How can I test an AngularJS service from the console

Question

I have a service like   angular module  app   factory  ExampleService   function      this f1   function world       return  Hello   world        return this       I would like to test it from the JavaScript console and call the function f1   of the service    How can I do that

User · Answer

Angularjs Dependency Injection framework is responsible for injecting the dependancies of you app module to your controllers. This is possible through its injector.

You need to first identify the ng-app and get the associated injector. The below query works to find your ng-app in the DOM and retrieve the injector.

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

In chrome, however, you can point to target ng-app as shown below. and use the $0 hack and issue angular.element($0).injector()

Once you have the injector, get any dependency injected service as below

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

User · Answer

JustGoscha s answer is spot on  but that s a lot to type when I want access  so I added this to the bottom of my app js   Then all I have to type is x   getSrv   http   to get the http service       if DEBUG function getSrv name  element        element   element       ng-app        return angular element element  injector   get name         endif   It adds it to the global scope but only in debug mode   I put it inside the  if DEBUG so that I don t end up with it in the production code   I use this method to remove debug code from prouduction builds

User · Answer

TLDR  In one line the command you are looking for   angular element document body  injector   get  serviceName       Deep dive  AngularJS uses Dependency Injection  DI  to inject services factories into your components directives and other services  So what you need to do to get a service is to get the injector of AngularJS first  the injector is responsible for wiring up all the dependencies and providing them to components    To get the injector of your app you need to grab it from an element that angular is handling  For example if your app is registered on the body element you call injector   angular element document body  injector    From the retrieved injector you can then get whatever service you like with injector get  ServiceName    More information on that in this answer  Can  39 t retrieve the injector from angular  And even more here  Call AngularJS from legacy code    Another useful trick to get the  scope of a particular element   Select the element with the DOM inspection tool of your developer tools and then run the following line   0 is always the selected element    angular element  0  scope

User · Answer

First of all  a modified version of your service    a    var app   angular module  app        app factory  ExampleService  function        return           f1   function world               return  Hello    world                         This returns an object  nothing to new here   Now the way to get this from the console is   b    var  inj   angular injector   app     var serv    inj get  ExampleService    serv f1  World      c    One of the things you were doing there earlier was to assume that the app factory returns you the function itself or a new ed version of it  Which is not the case  In order to get a constructor you would either have to do   app factory  ExampleService  function            return function                this f1   function world                   return  Hello    world                                     This returns an ExampleService constructor which you will next have to do a  new  on   Or alternatively   app service  ExampleService  function                this f1   function world                   return  Hello    world                           This returns new ExampleService   on injection

[angularjs] How can I test an AngularJS service from the console?

Examples related to angularjs

Examples related to angularjs-service