如何管理不同环境的配置变量/常数?
这可以是一个例子:
我的其余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中管理这种事情?
当前回答
你可以用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插件可以帮助你管理不同环境的变量。
对于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();
}));
你可以用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端点在生产和开发中不同)。
好问题!
一种解决方案是继续使用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');
});
你看过这个问题和答案吗?
你可以像这样为你的应用程序设置一个全局有效值:
app.value('key', 'value');
然后用在你的服务上。您可以将这段代码移动到config.js文件中，并在页面加载或其他方便的时候执行。
