Question

我正在使用typescript编写javascript，AngularJS应用程序。我也在使用grunt进行建设。事实上，我已经开始使用ng boilerplate。

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

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

我希望我的应用中的某些变量可以配置。所以在某些地方我可以使用像 -

这样的东西

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

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

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

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

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

Answer 2

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

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

$ http会自动为您解析json。

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

然后假设你的app模块是foo然后

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

如何读取角度模块内的json配置文件？

3 个答案: