.htaccess - 如何根据获取环境变量动态设置AngularjS基本URL？

Question

我有一个开发和生产环境，其中我的 URL 不同:

生产:
www.exmaple.com/page
发展:
dev.environment/project/page
我知道我可以在 AngularJS 中使用
<base href='/project/' />
但这对我没有帮助。在我加载我的 AngularJS 应用程序之前，我获取一个配置文件(在 app.js 中，使用 .run 语句，它读取具有环境的变量:

]).run([
  '$rootScope',
  '$http',
  function (
    $rootScope,
    $http
  ) {
    var configDeferred = $q.defer();

    // fetch config and set the API    
    $http.get('config.json').then(function(response) {
      $rootScope.config = response.data;
      configDeferred.resolve();
    });

    // Wait for the config to be loaded, then go to state
    $rootScope.$on('$stateChangeStart', function (event, next, current) {
      event.preventDefault();
      $q.all([configDeferred.promise]).then(function() {
        $state.transitionTo(next.name);
        return;
      });
    });

有没有办法根据 AngularJS 中获取的配置文件(可能带有 .htaccess)动态设置基本 URL？

尝试 1:
尝试通过 .run 获取配置并通过 ng-href 设置基本 url:

在我的 app.js 中编辑以下代码行:

// fetch config and set the API    
$http.get('config.json').then(function(response) {
  $rootScope.config = response.data;
  $rootScope.baseUrl = response.data.baseUrl; // '/project/'
  configDeferred.resolve();
});

在我的 index.html 中:

<base ng-href="{{baseUrl}}" />

看起来这不起作用:当我将标签的 href 属性更改为 ng-href 时，它会正确加载内容，但将我的 URL 更改为 dev.environment/page而不是 dev.environment/project/page
更新:
配置文件:

{
  "mode": "development",
  "baseUrl": "/project/"
}

Answer 1

我个人用 grunt 做这种事情.

当我运行我的 Angular 应用程序时，我有多个任务:

> grunt run --target=dev
> grunt run --target=prod
> grunt build --target=dev
> grunt build --target=prod
> etc...

然后在 grunt-preprocess 的帮助下进行字符串替换。模块 :

我的 constants.tpl.js文件被解析:

[...]
baseUrl:           '/* @echo ENV_WS_URL */',
[...]

并且 url 被填充。

有无限的可能性(字符串替换、文件复制等)。

例如，使用 grunt 确保开发配置文件不会投入生产。

如果您有兴趣，我可以提供更多详细信息，但我只想向您展示一种不同的方法。

编辑 gruntFile 示例:

'use strict';

module.exports = function(grunt) {

    /**
     * Retrieving current target
     */
    var target = grunt.option('target') || 'dev';
    var availableTargets = [
        'dev',
        'prod'
    ];

    /**
     * Load environment-specific variables
     */
    var envConfig = grunt.file.readJSON('conf.' + target + '.json');

    /**
     * This is the configuration object Grunt uses to give each plugin its
     * instructions.
     */
    grunt.initConfig({
        env: envConfig,       

        /*****************************************/
        /* Build files to a specific env or mode */
        /*****************************************/
        preprocess: {
            options: {
                context: {
                    ENV_WS_URL: '<%= env.wsUrl %>'
                }
            },
            constants: {
                src: 'constants.tpl.js',
                dest: 'constants.js'
            }
        },

        karma: {
            unit: {
                configFile: '<%= src.karma %>',
                autoWatch: false,
                singleRun: true
            },
            watch: {
                configFile: '<%= src.karma %>',
                autoWatch: true,
                singleRun: false
            }
        }

    });


    /****************/
    /* Plugins load */
    /****************/
    grunt.loadNpmTasks('grunt-preprocess');

    /*******************/
    /* Available tasks */
    /*******************/
    grunt.registerTask('run', 'Run task, launch web server for dev part', ['preprocess:constants']);

};

现在，命令:

> grunt run --target=dev

将创建一个带有 url 的新文件