如何读取angular模块内部的json配置文件

How to read the json config file inside angular module?

本文关键字：内部 模块 json 配置文件 angular 何读取 读取      更新时间：2023-09-26

我正在使用typescript编写javascript AngularJS应用程序。此外，我正在使用咕噜声进行建筑。事实上，我已经从ng样板开始了。

现在假设我有一个config.json文件，如下所示-

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

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

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

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

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

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

使用咕哝预处理：

我有一个配置.tpl.js与：

angular.module('app.config', [])
.constant('appConfig', {
    // clientside specific constants
    var1                        : 'value1',
    var2                        : [1,2,3],
    sharedVars                  : /* @echo SHARED_VARS */
});

然后，在我的咕哝文件：

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
    }
},

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

对于客户端代码，您应该只使用$http.get从服务器获取json文件。假设json文件在/manage/config.json上是http可访问的，那么您可以执行以下操作：

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

$http会自动为您进行json解析。

以下是我所做的

   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'])
相关文章：