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

您可以在主模块的配置中创建常量：

在配置方法中添加$ provide作为依赖项
使用provider方法添加像这样的所有常量

$ provide.provider（＆＃39; BASE_API_URL＆＃39;，{ $ get：function（）{ 返回＆＃39; https://myexample.net/api/＆＃39 ;; } }）;
您可以将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引擎的文件，其中包含我想部署的环境的正确值）。

基本上：

config.yml

  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实现这一需求的另一个好处是，您可以将这些常量的生成与构建，服务或观察任务集成在一起，从字面上看，忘记从现在开始做任何更改。希望它有所帮助！

如何在配置阶段加载和使用与环境相关的值

2 个答案: