如何读取 Angular 模块中的 json 配置文件？答案

【问题标题】：How to read the json config file inside angular module?如何读取 Angular 模块中的 json 配置文件？
【发布时间】：2014-11-17 06:11:42
【问题描述】：

我正在使用打字稿编写 javascript、AngularJS 应用程序。我也在使用 grunt 进行构建。事实上我是从ng boilerplate开始的。

现在假设我有一个类似下面的config.json 文件-

{
    "app": "abc",
    "login": "xyz" 
}

我希望我的应用程序中的一些变量是可配置的。所以在某个地方我可以使用类似的东西 -

var loginUrl : string = "def?pqr="+config.app;

现在如何在我的 javascript 文件中读取此配置？我正在寻找最佳实践答案。我也可以在grunt build 步骤替换。

注意：配置文件存在于客户端本身，即无需单独从服务器加载。

【问题讨论】：

标签： javascript json angularjs gruntjs typescript

【解决方案1】：

在我的例子中，我使用 grunt 将配置文件（与服务器共享）注入到一个角度常量模块中：

使用grunt-preprocess：

我有一个 config.tpl.js ：

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

.constant('appConfig', {

    // clientside specific constants
    var1                        : 'value1',
    var2                        : [1,2,3],
    sharedVars                  : /* @echo SHARED_VARS */
});

然后，在我的 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
    }
},

这样你可以在一个角度常量模块中注入一个完整的配置文件，或者只选择你想要的变量。

【讨论】：

我不需要 sharedVars，所以我只使用了客户端特定的常量。这意味着我不必使用和安装 grunt-preprocess
很好，这个解决方案按预期工作。尽管如此，我还是遇到了“sharedVars : /* @echo SHARED_VARS */”的错误。这很明显，因为它是一个评论。不知道有没有办法避免检测到错误？
@C0ZEN 包含回显的文件只是一个模板文件，您不应该按原样使用它。您应该使用生成的文件 src/config.js。
@Cétia 我不使用它，但我的 IDE 还是会检查它并告诉我有问题。加上运行 grunt 任务时的错误。
@C0ZEN 好的，我相信你可以告诉你的 IDE 和 linter 忽略 tpl 文件；）

【解决方案2】：

对于客户端代码，您应该只使用$http.get 从服务器获取 json 文件。假设 json 文件可通过 http 访问 /manage/config.json 你会这样做：

$http.get('/manage/config.json').then((res)=>{
     var config = res.data;
});

$http 会自动为你做 json 解析。

【讨论】：

配置文件存在于客户端本身。我会澄清这个问题。

【解决方案3】：

这就是我所做的

   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);
            }
        );

然后假设你的应用模块是 foo 那么

angular.module('foo',['portalConfig'])

【讨论】：