Are there any workarounds for this or should I just brazenly chuck my API key in here?
No don't put your API key in there, there are workarounds.
There are 2 basic phases for angular when it's loading/injecting/setting up dependencies. There is the config phase and then there is the post-config phase. (These aren't official names of phases, it's just how I describe them).
config phase
In the config phase, the only things that are available for injection are -Providers type constructs. This means that anything you typically inject inside a service or a controller aren't available for injection in your configuration function.
post-config phase
Once you're application has been bootstrapped, configured, etc., then you can inject your typical injectable dependencies (e.g. $http, $q, $templateCache, etc.)
typical solution
So in order to solve your issue, what I suggest is if you can't leverage something like module.run( function($http){ $http.get(<url to your config>) })
then you need to maybe forgo using $http and use a standard XMLHttpRequest for this bit of logic.
atypical solution
In the app I am working on, we have a similar need to load up some non-angular config data via a .txt file. Here's what I've done:
First postpone the automatic angular bootstrapping process (meaning I've left out the typical ng-app in my main index file). Then load the .txt file via:
var client = new XMLHttpRequest();
client.open( 'GET', './version.txt' );
client.onload = function()
{
kickoffAngular(client.responseText)
}
client.send();
Assuming your text is something simple like a key/value pair, each pair on a newline, you can parse the responseText like so:
kickoffAngular = function(text){
var kvPairs = text.split('\n')
kvPairs.forEach(function(kv){
var pair = kv.split('=')
var key = pair[0]
var val = pair[1]
... do something with them
})
}
Then bootstrap Angular via:
angular.bootstrap( document, <app name> )
