Question

我正在尝试在http get calls中读取环境变量

$http.get('http://'  + $location.host() + ':8080/api')

我希望能够阅读environmen变量并将其用作上述API调用中的http rest服务器，如下所示

 $http.get('environmental_variable ':8080/api')

注意：我不知道环境变量直到运行时因此我不能将值作为常量使用

Answer 1

有很多示例显示如何将设置放入不同的文件或常量中。其中大多数工作，但错过了重点。

您的配置设置不属于您的代码！

除了“Hello World”示例之外，您的部署应由CI / CD服务器执行，这应该负责设置配置设置。这有很多好处：

1）您正在将相同的代码部署到不同的环境中。如果将代码部署到测试环境，则需要将相同的代码部署到生产环境中。如果您的服务器必须重建代码，要添加生产配置设置，您将部署不同的代码。

2）可以在不泄露您的API详细信息，AWS设置和其他秘密信息的情况下共享代码。

3）它允许轻松添加新环境。

有很多关于如何做到这一点的例子。一个例子是www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables

Answer 2

浏览器中没有环境变量这样的东西。

$location服务始终会获取您当前的网址。我想你的API可能存在于不同的主机上。

可以通过将配置存储在Angular常量中来模拟环境变量。

app.constant('env', {
  API_URL: "http://someurl.com:8080/api"
});

然后，您可以将此常量注入其他提供程序。

app.controller('MyController', function($http, env) {  
  $http.get(env.API_URL);
});

这是关于best practices with constants的一篇不错的文章。本文倾向于不使用常量，因为能够在不重建代码的情况下修改配置很有用。

我通常处理此问题的方法是将所有实例配置详细信息移出到config.json文件，然后在我引导应用程序时使用$http加载它。

例如，您可能有这样的配置文件。

{
  apiUrl: "http://someurl.com:8080/api"
}

然后加载它的Angular服务。

app.service('Config', function($http) {
  return function() {
    return $http.get('config.json');
  };
});

然后其他服务可以获得承诺，这将在解析时公开配置。

app.controller('MyController', function($http, Config) {
  Config()
    .then(function(config) {
      $http.get(config.apiUrl);
    });
});

Answer 3

我强烈建议您使用库来设置环境变量。您可以使用角度环境插件来执行此操作：https://www.npmjs.com/package/angular-environment

这是一个例子

angular.module('yourApp', ['environment']).
config(function(envServiceProvider) {
    // set the domains and variables for each environment 
    envServiceProvider.config({
        domains: {
            development: ['localhost', 'acme.dev.local'],
            production: ['acme.com', '*.acme.com', 'acme.dev.prod'],
            test: ['test.acme.com', 'acme.dev.test', 'acme.*.com'],
            // anotherStage: ['domain1', 'domain2'] 
        },
        vars: {
            development: {
                apiUrl: '//api.acme.dev.local/v1',
                staticUrl: '//static.acme.dev.local',
                // antoherCustomVar: 'lorem', 
                // antoherCustomVar: 'ipsum' 
            },
            test: {
                apiUrl: '//api.acme.dev.test/v1',
                staticUrl: '//static.acme.dev.test',
                // antoherCustomVar: 'lorem', 
                // antoherCustomVar: 'ipsum' 
            },
            production: {
                apiUrl: '//api.acme.com/v1',
                staticUrl: '//static.acme.com',
                // antoherCustomVar: 'lorem', 
                // antoherCustomVar: 'ipsum' 
            },
            // anotherStage: { 
            //  customVar: 'lorem', 
            //  customVar: 'ipsum' 
            // }, 
            defaults: {
                apiUrl: '//api.default.com/v1',
                staticUrl: '//static.default.com'
            }
        }
    });

    // run the environment check, so the comprobation is made 
    // before controllers and services are built 
    envServiceProvider.check();
});

然后，您可以根据应用程序运行的环境获取正确的变量： var apiUrl = envService.read('apiUrl');

干杯！

Angular js读取环境变量

3 个答案: