我personnaly做这种东西与咕噜。

当我跑我的角度，应用程序我有多个任务：

 ＆GT;咕噜运行--target =开发
＆GT;咕噜运行--target = PROD
＆GT;咕噜构建--target =开发
＆GT;咕噜构建--target = PROD
＆GT;等等...
 

然后咕噜做字符串替换成 grunt- preprocess 模块的帮助：

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

  [...]
的baseUrl：/ * @echo ENV_WS_URL * /'，
[...]
 

和URL是稀少。

有无限的可能性（字符串替换，文件拷贝等）。

与繁重的做这确保dev的配置文件不进去的生产为例。

我可以把更多的细节，如果你有兴趣，但我只是想告诉你一个不同的方法。

编辑gruntFile例如：

 使用严格的;

module.exports =功能（咕噜）{

    / **
     *检索当前目标
     * /
    VAR的目标= grunt.option（'目标'）|| 开发;
    VAR availableTargets = [
        '开发'，
        督促
    ]。

    / **
     *负荷的环境，特定的变量
     * /
    VAR envConfig = grunt.file.readJSON（'触摸屏的配置'+目标+'.json'）;

    / **
     *这是配置对象咕噜用来给每个插件的
     *指示。
     * /
    grunt.initConfig（{
        ENV：envConfig，

        / ********* /
        / *建立文件到一个特定的包膜或模式* /
        / ********* /
        preprocess：{
            选项​​：{
                背景：{
                    ENV_WS_URL：'＆LT;％= env.wsUrl％＆GT;
                }
            }，
            常量：{
                SRC：constants.tpl.js，
                DEST：constants.js
            }
        }，

        因果报应：{
            单元： {
                CONFIGFILE：'＆LT;％= src.karma％＆GT;'，
                autoWatch：假的，
                singleRun：真
            }，
            看： {
                CONFIGFILE：'＆LT;％= src.karma％＆GT;'，
                autoWatch：真正的，
                singleRun：假的
            }
        }

    }）;


    / **************** /
    / *插件加载* /
    / **************** /
    grunt.loadNpmTasks（'grunt- preprocess'）;

    / ******************* /
    / *可用的任务* /
    / ******************* /
    grunt.registerTask（'跑'，'运行任务，启动Web服务器开发的一部分'，['$ P​​ $ pprocess：常量']）;

};
 

现在，命令：

 ＆GT;咕噜运行--target =开发
 

将创建一个新的文件与网址

I have a development and production environment in which my URL's differ:

production:

www.exmaple.com/page

development:

dev.environment/project/page

I know that I can set the base URL in AngularJS with the

<base href='/project/' />

but that doesn't help me out here. Before I load my AngularJS application I fetch a config file (in app.js, with the .run statement, which reads a variable that has the environment:

]).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;
      });
    });

Is there a way to dynamically set the base URL, based on a fetched config file in AngularJS (maybe with a .htaccess)?

Attempt 1: Try to get the config via .run and set the base url via ng-href:

Edit the following line of code in my 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();
});

and in my index.html:

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

It looks like this is not working: when I change the href attribute of tag to ng-href, it loads the content correctly, but changes my URL to dev.environment/page instead of dev.environment/project/page

UPDATE: The config file:

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

I personnaly do this kind of stuff with grunt.

When I run my angular-app I have multiple tasks :

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

Then grunt do strings replacement with the help of the grunt-preprocess module :

my constants.tpl.js file gets parsed :

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

and the url is populated.

There are endless possibilities (string replacements, file copy, etc).

Doing it with grunt ensure that dev config files do not go in production for example..

I can put more details if you're interested but I only wanted to show you a different approach.

edit gruntFile example :

'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']);

};

Now, the command :

> grunt run --target=dev

will create a new file with an url