对于Gulp用户，Gulp -ng-constant与Gulp -concat、event-stream和yargs结合使用也很有用。

var concat = require('gulp-concat'),
    es = require('event-stream'),
    gulp = require('gulp'),
    ngConstant = require('gulp-ng-constant'),
    argv = require('yargs').argv;

var enviroment = argv.env || 'development';

gulp.task('config', function () {
  var config = gulp.src('config/' + enviroment + '.json')
    .pipe(ngConstant({name: 'app.config'}));
  var scripts = gulp.src('js/*');
  return es.merge(config, scripts)
    .pipe(concat('app.js'))
    .pipe(gulp.dest('app/dist'))
    .on('error', function() { });
});

在我的配置文件夹中有这些文件:

ls -l config
total 8
-rw-r--r--+ 1 .. ci.json
-rw-r--r--+ 1 .. development.json
-rw-r--r--+ 1 .. production.json

然后你可以运行gulp config—env development，它将创建如下内容:

angular.module("app.config", [])
.constant("foo", "bar")
.constant("ngConstant", true);

我还有这个说明:

beforeEach(module('app'));

it('loads the config', inject(function(config) {
  expect(config).toBeTruthy();
}));

如果你使用Brunch, Constangular插件可以帮助你管理不同环境的变量。

你看过这个问题和答案吗?

你可以像这样为你的应用程序设置一个全局有效值:

app.value('key', 'value');

然后用在你的服务上。您可以将这段代码移动到config.js文件中，并在页面加载或其他方便的时候执行。

为了达到这个目的，我建议你使用AngularJS环境插件:https://www.npmjs.com/package/angular-environment

这里有一个例子:

angular.module('yourApp', ['environment']).
config(function(envServiceProvider) {
    // set the domains and variables for each environment 
    envServiceProvider.config({
        domains: {
            development: ['localhost', 'dev.local'],
            production: ['acme.com', 'acme.net', 'acme.org']
            // anotherStage: ['domain1', 'domain2'], 
            // anotherStage: ['domain1', 'domain2'] 
        },
        vars: {
            development: {
                apiUrl: '//localhost/api',
                staticUrl: '//localhost/static'
                // antoherCustomVar: 'lorem', 
                // antoherCustomVar: 'ipsum' 
            },
            production: {
                apiUrl: '//api.acme.com/v2',
                staticUrl: '//static.acme.com'
                // antoherCustomVar: 'lorem', 
                // antoherCustomVar: 'ipsum' 
            }
            // anotherStage: { 
            //  customVar: 'lorem', 
            //  customVar: 'ipsum' 
            // } 
        }
    });

    // run the environment check, so the comprobation is made 
    // before controllers and services are built 
    envServiceProvider.check();
});

然后，你可以从你的控制器调用变量，像这样:

envService.read('apiUrl');

希望能有所帮助。

一个很酷的解决方案可能是将所有特定于环境的值分离到某个单独的角模块中，所有其他模块都依赖于它:

angular.module('configuration', [])
       .constant('API_END_POINT','123456')
       .constant('HOST','localhost');

然后需要这些条目的模块可以声明对它的依赖:

angular.module('services',['configuration'])
       .factory('User',['$resource','API_END_POINT'],function($resource,API_END_POINT){
           return $resource(API_END_POINT + 'user');
       });

现在你可以想想更酷的东西:

包含配置的模块可以被分离到configuration.js中，它将包含在你的页面中。

只要不将这个单独的文件签入git，每个人都可以轻松地编辑这个脚本。但是，如果配置在一个单独的文件中，则更容易不签入配置。此外，您还可以在本地对其进行分支。

现在，如果您有一个构建系统，如ANT或Maven，您的进一步步骤可能是为API_END_POINT值实现一些占位符，这些占位符将在构建时用您的特定值替换。

或者你有你的configuration_a.js和configuration_b.js，并在后端决定包含哪个。

好问题!

一种解决方案是继续使用config.xml文件，并从后端向生成的html提供api端点信息，如下所示(以php为例):

<script type="text/javascript">
angular.module('YourApp').constant('API_END_POINT', '<?php echo $apiEndPointFromBackend; ?>');
</script>

也许不是一个漂亮的解决方案，但它会起作用。

另一种解决方案可能是保持API_END_POINT常量值，因为它应该在生产环境中，并且只修改您的hosts-file来将url指向您的本地api。

或者使用localStorage来重写，就像这样:

.factory('User',['$resource','API_END_POINT'],function($resource,API_END_POINT){
   var myApi = localStorage.get('myLocalApiOverride');
   return $resource((myApi || API_END_POINT) + 'user');
});