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

Posted 2023-02-22

【中文标题】如何读取 Angular 模块中的 json 配置文件？

【英文标题】：How to read the json config file inside angular module?

【发布时间】：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 步骤替换。

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

【参考方案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'])