typescript 如何读取 angular 模块中的 json 配置文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25988293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to read the json config file inside angular module?
提问by Vinayak Garg
I am writing the javascript, AngularJS app using typescript. Also I am using grunt for building. In fact I have started off with ng boilerplate.
我正在使用打字稿编写 javascript、AngularJS 应用程序。我也在使用 grunt 进行构建。事实上，我已经开始使用ng 样板。
Now suppose I have a config.jsonfile something like below-
现在假设我有一个config.json类似下面的文件 -
{
"app": "abc",
"login": "xyz"
}
I want some variables in my app to be configurable. So at some place I could use something like -
我希望我的应用程序中的一些变量是可配置的。所以在某些地方我可以使用类似的东西 -
var loginUrl : string = "def?pqr="+config.app;
Now how can I read this config in my javascript files? I am looking for best practice answer. I am fine with substitution at grunt buildstep also.
现在我如何在我的 javascript 文件中读取这个配置？我正在寻找最佳实践答案。我grunt build也可以在步骤中进行替换。
Note: The config file is present on client itself, i.e no need to load it from server separately.
注意：配置文件存在于客户端本身，即不需要单独从服务器加载它。
采纳答案by Cétia
In my case, I use grunt to inject a config file (shared with the server) in an angular constant module :
就我而言，我使用 grunt 在角度常量模块中注入一个配置文件（与服务器共享）：
Using grunt-preprocess:
I having a config.tpl.js with :
我有一个 config.tpl.js ：
angular.module('app.config', [])
.constant('appConfig', {
// clientside specific constants
var1 : 'value1',
var2 : [1,2,3],
sharedVars : /* @echo SHARED_VARS */
});
Then, in my gruntFile :
然后，在我的 gruntFile 中：
preprocess: {
options: {
context: {
SHARED_VARS: grunt.file.read('config.json'),
}
},
config: {
src: 'src/config.tpl.js',
dest: 'src/config.js' // true file generated and loaded in index.html
}
},
That way you can inject a full config file in an angular constant module, or pick only the vars you want.
这样你就可以在一个角度常量模块中注入一个完整的配置文件，或者只选择你想要的变量。
回答by basarat
For client side code you should just use $http.getto get the json file from the server. Assuming the json file is http accessible at /manage/config.jsonyou would do:
对于客户端代码，您应该只用于$http.get从服务器获取 json 文件。假设 json 文件可以通过 http 访问，/manage/config.json你会这样做：
$http.get('/manage/config.json').then((res)=>{
var config = res.data;
});
$http automatically does json parsing for you.
$http 自动为你做 json 解析。
回答by Pranay Dutta
here is what i did
这是我所做的
var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');
var configModule = angular.module('portalConfig', []);
$http.get('../config/Settings.json').then(
function (response) {
configModule.value('config', response.data);
}
);
and then suppose your app module is foo then
然后假设你的应用模块是 foo 那么
angular.module('foo',['portalConfig'])
