Is there a way to work around this issue, or should I just boldly insert my API key here?
No, do not include your API key in the code; there are alternative solutions available.
When Angular is loading or setting up dependencies, it goes through two main phases: the config phase and the post-config phase. (These aren't official terms, but they serve as a helpful way to describe the process).
Config Phase
In the config phase, only constructs like -Providers are available for injection. This means that traditional injections used in services or controllers cannot be injected in the configuration function.
Post-Config Phase
Once your application is bootstrapped and configured, you can inject typical dependencies such as $http, $q, $templateCache, etc.
Typical Solution
To address this issue, consider using something like
module.run( function($http){ $http.get(<url to your config>) })
. If that's not feasible, you may need to skip using
$http and opt for a standard
XMLHttpRequest.
Unconventional Solution
In a project I worked on, we needed to load non-angular config data from a .txt file. Here's how I approached it:
Firstly, delay the automatic angular bootstrapping process by omitting ng-app in your main index file. Then, load the .txt file using:
var client = new XMLHttpRequest();
client.open( 'GET', './version.txt' );
client.onload = function()
{
kickoffAngular(client.responseText)
}
client.send();
If your text consists of simple key/value pairs with each pair on a newline, you can parse the responseText like this:
kickoffAngular = function(text){
var kvPairs = text.split('\n')
kvPairs.forEach(function(kv){
var pair = kv.split('=')
var key = pair[0]
var val = pair[1]
... manipulate the values
})
}
Finally, bootstrap Angular using:
angular.bootstrap( document, <app name> )