在 Angular 中将环境变量设置为常量答案

【问题标题】：Setting environment variables as constants in Angular在 Angular 中将环境变量设置为常量
【发布时间】：2016-07-14 07:29:19
【问题描述】：

我的服务器上有一组环境变量，我通过一个简单的 API 调用获得：

angular.module('app')
  .factory('serverService', ['$resource',
    function($resource) {
      var base = '/api/server/';
      return $resource(base, {}, {
        getConfiguration: {method: 'GET', url: base + 'configuration'}
      });
    }]);

我在几个控制器中调用它：

var getConfiguration = function() {
  serverService.getConfiguration().$promise.then(function(config) {
    vm.config = config;
  });
};

我现在需要访问我的其他工厂之一的环境变量。我知道我可以注入 serverService 并在该工厂内再次进行此调用，但这似乎是一个糟糕的选择。

由于我的配置永远不会改变（配置仅因环境 [dev, staging, prod] 而不同），我是否应该在我的应用程序加载并将结果对象设置为常量时进行一次此 API 调用？如果是这样，我将如何处理？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

假设这个变量是静态的，我会让服务方法返回承诺，而不是执行一个新的查询。服务是单例的，所以它应该只进行一次查询。此时，我会将 serverService 重命名为更贴切的名称，例如 ConfigurationService，这样可以“感觉”更好地在任何地方注入。

angular.module('app')
  .factory('serverService', ['$http',
    function($resource) {
      var base = '/api/server/';
      //Get data and peel off http request data
      var configPromise = $http.get(base + 'configuration').then(function(response){return response.data});
      return {
              getConfiguration: function(){
                return configPromise
              }
            };
        }
    }]);

var getConfiguration = function() {
  serverService.getConfiguration().then(function(config) {
    vm.config = config;
  });
};

选项 2：

如果您可以访问常量服务器端并在生命周期中将其注入，您可以使用app.constant。这是一个更好的解决方案，因为在您的应用引导程序中引入另一个 AJAX 调用只会进一步减慢页面加载速度。这种“往返”引导循环真的可以开始加起来了。

app.constant('config', ${configVar})

【讨论】：

同意方案二。