如何管理不同环境的配置变量/常数?
这可以是一个例子:
我的其余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中管理这种事情?
当前回答
我有点晚了，但如果你正在使用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服务器将在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' ]);
现在我的常量可以在需要的地方被注入依赖项。例如,
app.controller('MyController', ['ENV', function( ENV ) {
if( ENV === 'production' ) {
...
}
}]);
其他回答
我们也可以这样做。
(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];
}
}
});
})();
在你的控制器/服务中，我们可以注入依赖项并调用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')将根据主机环境返回url。
你可以用lvh。me:9000来访问你的AngularJS应用程序，(lvh。Me只是指向127.0.0.1)，然后指定一个不同的端点如果lvh。我是主持人:
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/';
}
});
然后注入Configuration服务并使用Configuration。当你需要访问API时:
$resource(Configuration.API + '/endpoint/:id', {
id: '@id'
});
有点笨拙，但对我来说很好，尽管在稍微不同的情况下(API端点在生产和开发中不同)。
如果你使用Brunch, Constangular插件可以帮助你管理不同环境的变量。
好问题!
一种解决方案是继续使用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');
});
为了达到这个目的，我建议你使用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');
希望能有所帮助。
