javascript - AngularJS:如何在配置阶段使用 $http

Question

我正在使用 Angular 构建单页应用程序。我们将持续集成与多个Dev 和QA 环境结合使用。这意味着每次我在不同的环境中部署应用程序时，我都需要更新一些配置参数，例如 SPA baseUrl、rest api url 或我的 oauth 服务器的 url。

为实现这一点，我们的 CI 引擎会在我们即将部署到每个环境时为每个环境生成一个包含正确参数的 config.json 文件。为此，我创建了一个非常简单的服务:

(function () {
  'use strict';

  angular
    .module('app.core')
    .factory('config', config);

  config.$inject = ['$http'];

  function config($http) {
    return {
      load: load
    };

    //////////

    function load() {
      return $http.get('assets/config/config.json');
    }
  }
}());

我的大部分服务都是在配置阶段 通过提供商配置的。这就是问题所在。如您所知，在此阶段无法注入(inject)服务，但我想使用 config 服务为我的提供商设置正确的 URL 和参数。

有没有正确的方法来做到这一点？

到目前为止，我唯一可以考虑的是将这些配置参数嵌入到我的模块创建文件中，以便随时可以使用。这看起来很丑陋，因为我不希望我的应用程序有任何外部进程修改我的源代码。

Answer 1

如果这些是依赖 config.json 的异步服务，那么更改它们的配置方式并使您的配置适合异步工作流是完全可以的，例如

app.factory('config', function ($http) {
  return $http.get('config.json', { cache: true })
    .then(function (response) {
      return response.data;
    });
});

app.factory('asyncService', function ($http, config) {
  return config.then(function (config) {
    return $http...
  }).then(...);
});

否则最好的选择是使用 Gulp/Grunt/whatever 为服务构建 json 配置。

想到

angular.module('config', []).constant('config', <%= configJson %>);

作为编译模板而不是“我的应用修改我的源代码的外部进程”。