如何在配置階段加載和使用與環境相關的值

Question

我想將我的Web應用程序部署到多個環境中。 使用持續集成，我可以運行一個任務來為特定環境生成config.json。 除其他外，該文件將包含要使用的特定URL。

{
  "baseUrl": "http://www.myapp.es/",
  "baseApiUrl": "http://api.myapp.es/",
  "baseAuthUrl": "http://api.myapp.es/auth/"
}

當我嘗試在配置階段通過提供程序設置不同的服務時，就會出現問題。 當然，該階段尚不提供服務，因此我無法使用$ http加載該json文件並正確設置我的提供程序。

基本上我想做類似的事情：

  function config($authProvider) {
    $authProvider.baseUrl = config.baseAuthUrl;
  }

有沒有辦法在運行時從文件中加載這些值？ 我唯一能想到的就是讓提到的任務立即更改此文件。 但是，我有幾個模塊，因此，在所有這些模塊中都必須這樣做，這似乎不正確。

Answer 1

您可以在主模塊的配置中創建常量：

1. 在配置方法中添加$ provide作為依賴項

2. 使用provider方法添加所有這樣的常量

   $ provide.provider（ 'BASE_API_URL'，{$得到：函數（）{return '指令https://myexample.net/api/ ';}}）;

3. 您可以將BASE_API_URL用作服務中的依賴項。

我希望這有幫助

（可選）您可以根據您的環境設置網址：

$provide.provider('BASE_API_URL', {
                $get: function () {
                    if(window.location.hostname.toLowerCase() == 'myapp.myexample.net')
                    {
                        return 'https://myexample.net/api/' //pre-production

                    }else
                    {

                        return 'http://localhost:61132/'; //local

                    }
                }
            });

問候！

Answer 2

最后，解決方案是通過gulp任務使用模板（gulp-template）生成一個角度常數文件。 最后，我使用的是yaml文件而不是json文件（這是使用我要部署到的環境的適當值生成我的CI引擎的文件）。

基本上：

配置文件

  baseUrl: 'http://www.myapp.es/'
  baseApiUrl: 'http://api.myapp.es/'
  auth:
    url: 'auth/'

config.module.constants.template

(function () {
  'use strict';

  angular
    .module('app.config')
    .constant('env_variables', {
      baseUrl: '<%=baseUrl%>',
      baseApiUrl: '<%=baseApiUrl%>',
      authUrl: '<%=auth.url%>'
    });

}());

gulpfile.js

gulp.task('splicing', function(done) {
  var yml = path.join(conf.paths.src, '../config/config.yml');
  var json = yaml.safeLoad(fs.readFileSync(yml, 'utf8'));
  var template = path.join(conf.paths.src, '../config/config.module.constants.template');
  var targetFile = path.join(conf.paths.src, '/app/config');

  return gulp.src(template)
    .pipe($.template(json))
    .pipe($.rename("config.module.constants.js"))
    .pipe(gulp.dest(targetFile), done);
});

然后，您只需將其注入所需的配置階段即可：

 function config($authProvider, env_variables) {
    $authProvider.baseUrl = env_variables.baseApiUrl + env_variables.authUrl;
  }

使用gulp滿足此需求的另一個好處是，您可以將這些常量的生成與構建，服務或監視任務集成在一起，並且從字面上講，從現在起就無需進行任何更改。 希望能幫助到你！