在AngularJS的配置中发出GET请求

Question

Similar question here但在这种情况下似乎不起作用。我使用的是Angular-UI's Google Maps API，需要配置如下：

.config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        //    key: 'your api key',
        v: '3.20', //defaults to latest 3.X anyhow
        libraries: 'weather,geometry,visualization'
    });
})

我不想直接在这里使用我的API密钥，我想通过GET请求（'/api/googleAPI'）使用路由从我的服务器加载它。但是，当我尝试：

 .config(function($http, uiGmapGoogleMapApiProvider) {

我明白了：

 Failed to instantiate module myApp due to: Error: [$injector:unpr] Unknown provider: $http

有没有相关的解决方法，或者我应该在这里肆无忌惮地查看我的API密钥？

Answer 1

  

有没有相关的解决方法，或者我应该在这里肆无忌惮地查看我的API密钥？

否不要将API密钥放在那里，有解决方法。

在加载/注入/设置依赖关系时，角度有两个基本阶段。有 config 阶段，然后是 post-config 阶段。 （这些不是阶段的官方名称，而是我如何描述它们）。

配置阶段

在 config 阶段，唯一可用于注入的内容是 -Providers 类型构造。这意味着您通常在服务或控制器中注入的任何内容都不能在配置函数中注入。

配置后阶段

一旦您的应用程序已经被引导，配置等，那么您可以注入典型的可注入依赖项（例如$ http，$ q，$ templateCache等）

典型解决方案

所以为了解决你的问题，我建议如果你不能利用像module.run( function($http){ $http.get(<url to your config>) })这样的东西 然后你需要放弃使用$http并使用标准XMLHttpRequest来表示这一点。

非典型解决方案

在我正在开发的应用程序中，我们有类似的需要通过.txt文件加载一些非角度配置数据。这就是我所做的：

首先推迟自动角度自举过程（意味着我在主索引文件中遗漏了典型的ng-app）。然后通过以下方式加载.txt文件：

var client = new XMLHttpRequest();
client.open( 'GET', './version.txt' );
client.onload = function()
{
    kickoffAngular(client.responseText)
}
client.send();

假设您的文字像键/值对一样简单，换行中的每一对，您都可以解析responseText，如下所示：

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
   })
}

然后引导Angular via：

angular.bootstrap( document, <app name> )

Answer 2

基于@ ryeballar的建议

在阅读@ryeballer在我的其他answer的评论中提供的链接后，有一个更简单的解决方法，并不要求你搞乱预引导处理或{{1}或上面非典型解决方案中建议的任何内容。

XMLHttpRequests

我认为，鉴于它的简单性以及它在典型的角度后引导生命周期内运行，这应该是选定的答案