如何根据获取的环境变量动态设置AngularjJS基本URL？

Question

我有一个开发和生产环境,我的URL有所不同:

生产:

www.exmaple.com/page

发展:

dev.environment/project/page

我知道我可以在AngularJS中设置基本URL

<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}}" />

看起来这不起作用:当我将tag的href属性更改为ng-href时,它会正确加载内容,但是将我的URL更改为dev.environment/page而不是dev.environment/project/page

更新: 配置文件:

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

Answer 1

我个人这样做的人grunt.

当我运行我的角度应用程序时,我有多个任务:

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

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

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

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

并填充了网址.

有无穷无尽的可能性(字符串替换,文件复制等).

使用grunt执行此操作可确保dev配置文件不会出现在生产中.

如果你有兴趣,我可以提供更多细节,但我只是想向你展示一个不同的方法.

编辑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创建一个新文件