如何管理不同环境的配置变量/常量？
这可能就是一个例子：
我的其他API可以在localhost:7080/myapi/上访问，但我的朋友在Git版本控制下使用相同的代码，在localhost:8099/hisapi/上的Tomcat上部署了API。
假设我们有这样的事情：
angular
.module('app', ['ngResource'])
.constant('API_END_POINT','<local_end_point>')
.factory('User', function($resource, API_END_POINT) {
return $resource(API_END_POINT + 'user');
});
如何动态注入API端点的正确值，具体取决于环境？
在PHP中，我通常使用config.username.xml文件执行此类操作，将基本配置文件（config.xml）与用户名识别的本地环境配置文件合并。但我不知道如何在JavaScript中管理这类事情？
答案 0 :(得分：209)
我有点迟到了，但是如果你正在使用Grunt我在grunt-ng-constant取得了很大的成功。
我的ngconstant中的Gruntfile.js的配置部分看起来像
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会在config.js生成app/scripts/文件，看起来像
"use strict";
angular.module("config", []).constant("ENV", "development");
最后，我声明了对任何需要它的模块的依赖：
// the 'config' dependency is generated via grunt
var app = angular.module('myApp', [ 'config' ]);
现在我的常量可以在需要时注入依赖项。如，
app.controller('MyController', ['ENV', function( ENV ) {
if( ENV === 'production' ) {
...
}
}]);
答案 1 :(得分：75)
一个很酷的解决方案可能是将所有特定于环境的值分成一些单独的角度模块，所有其他模块都依赖于：
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，并在后端决定要包含哪些内容。
答案 2 :(得分：30)
对于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();
}));
答案 3 :(得分：17)
为实现这一目标，我建议您使用AngularJS Environment Plugin：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');
希望它有所帮助。
答案 4 :(得分：13)
您可以使用lvh.me:9000访问AngularJS应用，（lvh.me只指向127.0.0.1）然后在lvh.me是主持人的情况下指定其他端点：
app.service("Configuration", function() {
if (window.location.host.match(/lvh\.me/)) {
return this.API = 'http://localhost\\:7080/myapi/';
} else {
return this.API = 'http://localhost\\:8099/hisapi/';
}
});
然后注入配置服务并在需要访问API的地方使用Configuration.API：
$resource(Configuration.API + '/endpoint/:id', {
id: '@id'
});
有点笨重，但对我来说很好，虽然情况略有不同（API端点在生产和开发方面有所不同）。
答案 5 :(得分：5)
好问题！
一种解决方案可能是继续使用您的config.xml文件，并从后端向您生成的html提供api端点信息，如下所示（例如在php中）：
<script type="text/javascript">
angular.module('YourApp').constant('API_END_POINT', '<?php echo $apiEndPointFromBackend; ?>');
</script>
也许不是一个漂亮的解决方案，但它会起作用。
另一个解决方案可能是保持API_END_POINT常量值，因为它应该在生产中，并且只修改hosts文件以将该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');
});
答案 6 :(得分：5)
我们也可以这样做。
(function(){
'use strict';
angular.module('app').service('env', function env() {
var _environments = {
local: {
host: 'localhost:3000',
config: {
apiroot: 'http://localhost:3000'
}
},
dev: {
host: 'dev.com',
config: {
apiroot: 'http://localhost:3000'
}
},
test: {
host: 'test.com',
config: {
apiroot: 'http://localhost:3000'
}
},
stage: {
host: 'stage.com',
config: {
apiroot: 'staging'
}
},
prod: {
host: 'production.com',
config: {
apiroot: 'production'
}
}
},
_environment;
return {
getEnvironment: function(){
var host = window.location.host;
if(_environment){
return _environment;
}
for(var environment in _environments){
if(typeof _environments[environment].host && _environments[environment].host == host){
_environment = environment;
return _environment;
}
}
return null;
},
get: function(property){
return _environments[this.getEnvironment()].config[property];
}
}
});
})();
在controller/service中，我们可以注入依赖项并使用要访问的属性调用get方法。
(function() {
'use strict';
angular.module('app').service('apiService', apiService);
apiService.$inject = ['configurations', '$q', '$http', 'env'];
function apiService(config, $q, $http, env) {
var service = {};
/* **********APIs **************** */
service.get = function() {
return $http.get(env.get('apiroot') + '/api/yourservice');
};
return service;
}
})();
$http.get(env.get('apiroot')会根据主机环境返回网址。
答案 7 :(得分：3)
线程很晚，但我使用的一种技术，前Angular，是利用JSON和JS的灵活性来动态引用集合键，并使用环境的不可分割的事实（主机服务器名称，当前浏览器语言等）作为输入来有选择地区分/优选JSON数据结构中的后缀键名。
这不仅提供了部署环境上下文（根据OP），而且提供了任意上下文（例如语言）以提供i18n或同时需要的任何其他方差，并且（理想情况下）在单个配置清单中，没有重复，并且可读性显而易见
关于10条线路VANILLA JS
过度简化但经典的示例：JSON格式的属性文件中的API端点基础URL，根据环境的不同而不同，其中（natch）主机服务器也会有所不同：
...
'svcs': {
'VER': '2.3',
'API@localhost': 'http://localhost:9090/',
'API@www.uat.productionwebsite.com': 'https://www.uat.productionwebsite.com:9090/res/',
'API@www.productionwebsite.com': 'https://www.productionwebsite.com:9090/api/res/'
},
...
区分功能的关键只是请求中的服务器主机名。
当然，这可以根据用户的语言设置与其他键组合使用：
...
'app': {
'NAME': 'Ferry Reservations',
'NAME@fr': 'Réservations de ferry',
'NAME@de': 'Fähren Reservierungen'
},
...
区分/偏好的范围可以局限于单个键（如上所述），其中只有在功能输入的匹配键+后缀或整个结构时才覆盖“基本”键，并且该结构本身以递归方式解析以匹配区分/首选后缀：
'help': {
'BLURB': 'This pre-production environment is not supported. Contact Development Team with questions.',
'PHONE': '808-867-5309',
'EMAIL': 'coder.jen@lostnumber.com'
},
'help@www.productionwebsite.com': {
'BLURB': 'Please contact Customer Service Center',
'BLURB@fr': 'S\'il vous plaît communiquer avec notre Centre de service à la clientèle',
'BLURB@de': 'Bitte kontaktieren Sie unseren Kundendienst!!1!',
'PHONE': '1-800-CUS-TOMR',
'EMAIL': 'customer.service@productionwebsite.com'
},
因此，如果访问生产网站的用户具有德语（ de ）语言首选项设置，则上述配置将崩溃为：
'help': {
'BLURB': 'Bitte kontaktieren Sie unseren Kundendienst!!1!',
'PHONE': '1-800-CUS-TOMR',
'EMAIL': 'customer.service@productionwebsite.com'
},
这种神奇的偏好/歧视JSON重写功能是什么样的？不多：
// prefer(object,suffix|[suffixes]) by/par/durch storsoc
// prefer({ a: 'apple', a@env: 'banana', b: 'carrot' },'env') -> { a: 'banana', b: 'carrot' }
function prefer(o,sufs) {
for (var key in o) {
if (!o.hasOwnProperty(key)) continue; // skip non-instance props
if(key.split('@')[1]) { // suffixed!
// replace root prop with the suffixed prop if among prefs
if(o[key] && sufs.indexOf(key.split('@')[1]) > -1) o[key.split('@')[0]] = JSON.parse(JSON.stringify(o[key]));
// and nuke the suffixed prop to tidy up
delete o[key];
// continue with root key ...
key = key.split('@')[0];
}
// ... in case it's a collection itself, recurse it!
if(o[key] && typeof o[key] === 'object') prefer(o[key],sufs);
};
};
在我们的实现中，包括Angular和pre-Angular网站，我们只需将JSON置于自动执行的JS闭包中，包括prefer（）函数和fed基本属性，就可以比其他资源调用更好地引导配置。主机名和语言代码（并接受您可能需要的任何其他任意后缀）：
(function(prefs){ var props = {
'svcs': {
'VER': '2.3',
'API@localhost': 'http://localhost:9090/',
'API@www.uat.productionwebsite.com': 'https://www.uat.productionwebsite.com:9090/res/',
'API@www.productionwebsite.com': 'https://www.productionwebsite.com:9090/api/res/'
},
...
/* yadda yadda moar JSON und bisque */
function prefer(o,sufs) {
// body of prefer function, broken for e.g.
};
// convert string and comma-separated-string to array .. and process it
prefs = [].concat( ( prefs.split ? prefs.split(',') : prefs ) || []);
prefer(props,prefs);
window.app_props = JSON.parse(JSON.stringify(props));
})([location.hostname, ((window.navigator.userLanguage || window.navigator.language).split('-')[0]) ] );
预Angular网站现在有一个折叠（没有@后缀键） window.app_props 来引用。
一个Angular站点，作为bootstrap / init步骤，只需将死去的道具对象复制到$ rootScope中，并（可选）从全局/窗口范围中销毁它
app.constant('props',angular.copy(window.app_props || {})).run( function ($rootScope,props) { $rootScope.props = props; delete window.app_props;} );
随后注入控制器：
app.controller('CtrlApp',function($log,props){ ... } );
或从视图中的绑定引用：
<span>{{ props.help.blurb }} {{ props.help.email }}</span>
注意事项？ @字符无效JS / JSON变量/键命名，但到目前为止已被接受。如果这是一个交易破坏者，可以替代你喜欢的任何约定，例如“__”（双下划线），只要你坚持下去。
该技术可以应用于服务器端，移植到Java或C＃，但您的效率/紧凑性可能会有所不同。
或者，函数/约定可以是前端编译脚本的一部分，因此完整的gory all-environment / all-language JSON永远不会通过线路传输。
<强>更新
我们已经进化了这种技术的使用，允许多个后缀到一个键，以避免被迫使用集合（你仍然可以，你想要的深度），以及尊重首选后缀的顺序。
示例（另见工作jsFiddle）：
var o = { 'a':'apple', 'a@dev':'apple-dev', 'a@fr':'pomme',
'b':'banana', 'b@fr':'banane', 'b@dev&fr':'banane-dev',
'c':{ 'o':'c-dot-oh', 'o@fr':'c-point-oh' }, 'c@dev': { 'o':'c-dot-oh-dev', 'o@fr':'c-point-oh-dev' } };
/*1*/ prefer(o,'dev'); // { a:'apple-dev', b:'banana', c:{o:'c-dot-oh-dev'} }
/*2*/ prefer(o,'fr'); // { a:'pomme', b:'banane', c:{o:'c-point-oh'} }
/*3*/ prefer(o,'dev,fr'); // { a:'apple-dev', b:'banane-dev', c:{o:'c-point-oh-dev'} }
/*4*/ prefer(o,['fr','dev']); // { a:'pomme', b:'banane-dev', c:{o:'c-point-oh-dev'} }
/*5*/ prefer(o); // { a:'apple', b:'banana', c:{o:'c-dot-oh'} }
1/2 （基本用法）更喜欢'@dev'键，丢弃所有其他后缀键
3 喜欢'@dev'而不是'@fr'，更喜欢'@ dev＆amp; fr'优于其他所有
4 （与3相同，但更喜欢'@fr'超过'@dev'）
5 没有首选后缀，删除所有后缀属性
它通过对每个后缀属性进行评分并在迭代属性并查找更高分的后缀时将后缀属性的值提升到非后缀属性来实现此目的。
此版本中的一些效率，包括消除对JSON的依赖性以进行深层复制，并且只返回到在深度得分回合中存活的对象：
function prefer(obj,suf) {
function pr(o,s) {
for (var p in o) {
if (!o.hasOwnProperty(p) || !p.split('@')[1] || p.split('@@')[1] ) continue; // ignore: proto-prop OR not-suffixed OR temp prop score
var b = p.split('@')[0]; // base prop name
if(!!!o['@@'+b]) o['@@'+b] = 0; // +score placeholder
var ps = p.split('@')[1].split('&'); // array of property suffixes
var sc = 0; var v = 0; // reset (running)score and value
while(ps.length) {
// suffix value: index(of found suffix in prefs)^10
v = Math.floor(Math.pow(10,s.indexOf(ps.pop())));
if(!v) { sc = 0; break; } // found suf NOT in prefs, zero score (delete later)
sc += v;
}
if(sc > o['@@'+b]) { o['@@'+b] = sc; o[b] = o[p]; } // hi-score! promote to base prop
delete o[p];
}
for (var p in o) if(p.split('@@')[1]) delete o[p]; // remove scores
for (var p in o) if(typeof o[p] === 'object') pr(o[p],s); // recurse surviving objs
}
if( typeof obj !== 'object' ) return; // validate
suf = ( (suf || suf === 0 ) && ( suf.length || suf === parseFloat(suf) ) ? suf.toString().split(',') : []); // array|string|number|comma-separated-string -> array-of-strings
pr(obj,suf.reverse());
}
答案 8 :(得分：2)
如果您正在使用Brunch，则插件Constangular可帮助您管理不同环境的变量。
答案 9 :(得分：-8)
你见过这个question及其答案吗？
您可以为您的应用设置全局有效值，如下所示：
app.value('key', 'value');
然后在您的服务中使用它。您可以将此代码移动到config.js文件，并在页面加载或其他方便的时刻执行它。