Adding visionmedia/debug to an Ionic/AngularJS application

Question

I would like to add some debugging to our Ionic/AngularJS application. I was thinking about the visionmedia/debug library to use. But how can I add this library on a more Angular way?

You can see a plnkr with a working example of the current code. Make sure to open the developer console to see the output of mva:module-a and mva:module-b

So at this moment I have referenced the debug.js in the index.html as follows:

<script src="https://rawgit.com/visionmedia/debug/master/dist/debug.js" type="text/javascript"></script>

And per module I have added a variable to enable logging to this module. I now reference this code in the index.html:

<script>
  debug.enable('*');
  var debugMdlA = debug('mva:module-a');
  var debugMdlB = debug('mva:module-b');
</script>

Finally I can use this variables in a controller:

myApp.controller('MyController', function ($scope) {
  debugMdlA('Some logging for module A');
  debugMdlB('Some logging for module B');
});

But this all isn't very 'Angularish'. Does any know of a better Angularish way for this library?

Answer 1

You could always make a LogFactory and inject it into your controller:

myApp.controller('MyController', function ($scope, LogFactory) {
  LogFactory.log('functionA', 'log something or other');
});

myApp.factory('LogFactory', function() {
  return {
    log: function(functionName, message) {
      debug(functionName)(message);
    }
  }
});

http://plnkr.co/edit/NP6PZGH7nHroly8QMtsh?p=preview