Add stuff to a global variable

[kentcdodds]

I want to be able to do this:

angular.module('my.sweet-app.with-hyphens.and-dots').factory('UnicornService', function() {
  return {
    unicornsRock: true
  };
}

And then in dev tools do this:

console.log(mySweetAppWithHyphensAndDots.UnicornService.unicornsRock);
// logs true

I find myself wanting to do this all of the time with services especially, though it would be cool with filters and stuff too I guess :-)

Not sure if this is the implementation you're looking for, but I'd love to see this :dancer: <-- I was going to do a :D smiley face, but GitHub suggested a better option...

[mgol]

Note that dependency injection means that just my defining a factory you don't actually have it available yet; only when sth else that is made available requires it.

But maybe populating some global with services namespaced by modules once they're instatiated wouldn't be a bad idea.

[kentcdodds]

Indeed @mzgol, implementing this into batarang would be useful. What I do right now is something like:

angular.module('something').factory('SomethingElse', function() {
  var fact = {
    foo: 'bar'
  };
  window.MY_GLOBAL.SomethingElse = fact;
  return fact;
});

Would love it if batarang would do this for me. Perhaps there's something I can hack together on my project that would do this for me in a dev environment... Any suggestions?

[btford]

Interesting. I'll look into this when I have time.

[kentcdodds]

I have improved the way I do this now. I have a file that is loaded only in dev, it runs this:

var intervalId = setInterval(function() {
  var firstScopeEl = document.querySelector('.ng-scope');
  var $injector = angular.element(firstScopeEl).injector();
  if (!$injector) {
    return;
  }
  clearInterval(intervalId);
  window.$injector = $injector;
  var injectables = [
    '$rootScope', '$http', '$modal', 'REST', '$q', 'notify',
    '$state', '$stateParams', '$location', 'user', '$feature',
    'DS', 'AuthToken', 'API_URL', 'azLog', '$log', '$timeout',
    'formlyConfig', '$parse', '$templateCache', 'utils',
    'recentStateParams'
  ];
  injectables.forEach(function(injectable) {
    window[injectable] = $injector.get(injectable);
  });
}, 10); // wait for bootstrap

I just stick whatever I want to access into that injectables and it gets added to window for me. It's very effective and helps me out a ton. Would be interested to see this added to batarang configurable per url or something.

[kentcdodds]

While we're adding this kind of stuff to batarang (if we do), maybe some of these functions could be helpful. Paste it in your console on your angular app and run ngTools.help(). Let me know if you want another issue for this.