javascript - 如何在 Angular.js 中配置不同的环境？

Question

您如何管理不同环境的配置变量/常量？

这可能是一个例子:

我的 REST API 可以在 localhost:7080/myapi/ 上访问，但是我的 friend 在 Git 版本控制下处理相同的代码，该 API 部署在他的 Tomcat 上 localhost:8099/hisapi/.

假设我们有这样的事情:

angular
    .module('app', ['ngResource'])

    .constant('API_END_POINT','<local_end_point>')

    .factory('User', function($resource, API_END_POINT) {
        return $resource(API_END_POINT + 'user');
    });

如何根据环境动态注入(inject) API 端点的正确值？

在 PHP 中，我通常使用 config.username.xml 文件来做这种事情，将基本配置文件 (config.xml) 与本地环境配置文件合并用户。但是我不知道如何在 JavaScript 中管理这种事情？

Answer 1

我有点晚了，但如果你使用 Grunt我在 grunt-ng-constant 上取得了巨大成功.

我的 Gruntfile.js 中 ngconstant 的配置部分看起来像

ngconstant: {
  options: {
    name: 'config',
    wrap: '"use strict";\n\n{%= __ngModule %}',
    space: '  '
  },
  development: {
    options: {
      dest: '<%= yeoman.app %>/scripts/config.js'
    },
    constants: {
      ENV: 'development'
    }
  },
  production: {
    options: {
      dest: '<%= yeoman.dist %>/scripts/config.js'
    },
    constants: {
      ENV: 'production'
    }
  }
}

使用 ngconstant 的任务看起来像

grunt.registerTask('server', function (target) {
  if (target === 'dist') {
    return grunt.task.run([
      'build',
      'open',
      'connect:dist:keepalive'
    ]);
  }

  grunt.task.run([
    'clean:server',
    'ngconstant:development',
    'concurrent:server',
    'connect:livereload',
    'open',
    'watch'
  ]);
});

grunt.registerTask('build', [
  'clean:dist',
  'ngconstant:production',
  'useminPrepare',
  'concurrent:dist',
  'concat',
  'copy',
  'cdnify',
  'ngmin',
  'cssmin',
  'uglify',
  'rev',
  'usemin'
]);

所以运行 grunt server 会在 app/scripts/ 中生成一个 config.js 文件，看起来像

"use strict";
angular.module("config", []).constant("ENV", "development");

最后，我声明对任何需要它的模块的依赖:

// the 'config' dependency is generated via grunt
var app = angular.module('myApp', [ 'config' ]);

现在我的常量可以在需要的地方注入(inject)依赖。例如，

app.controller('MyController', ['ENV', function( ENV ) {
  if( ENV === 'production' ) {
    ...
  }
}]);