How do I create variables for angular services that can be inspected in the console?

Question

I have an angular application which is based around a core service.

To ease debugging, I'd rather not have to remember the following invocation (from how to debug angular services in browser ):

tasks = angular.element(document.body).injector().get('tasks');

So my first thought was to stick this statement in a script tag in my index.html, but if I do that, it fails with

Uncaught TypeError: Cannot read property 'get' of undefined

I was looking for the equivalent of jQuery's document ready, but it seems that's not the Angular way. The Angular way seemed to be a construct like this (from https://plus.google.com/+MicahGodbolt/posts/CiKyN2YUafM ):

angular.module('mushin', []).run(function() {
  window.tasks = angular.element(document.body).injector().get('tasks');
})

This however gives me the same error.

What's the proper way to get an angular service into a javascript variable for debugging in the console?

Answer 1

You can attach the tasks service to the widow object anywhere you use it. In your example with the run() method above you just need to add the tasks service as a dependency to the function like so:

angular.module('mushin', []).run(function(tasks) {
  window.tasks = tasks;
});

It's failing now because at the point of entry to the run method there isn't anything yet bound to the body element so you don't have an injector yet.

The more "angular way" to do this would be to also depend on the $window service so your callback becomes:

angular.module('mushin', []).run(function($window, tasks) {
  $window.tasks = tasks;
});