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.

Now suppose I have a config.json file something like below-

{
    "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 build step also.

Note: The config file is present on client itself, i.e no need to load it from server separately.

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.

Now suppose I have a config.json file something like below-

{
    "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 build step also.

Note: The config file is present on client itself, i.e no need to load it from server separately.

• javascript
• json
• angularjs
• gruntjs
• typescript

3 Answers 3

In my case, I use grunt to inject a config file (shared with the server) in an angular constant module :

Using grunt-preprocess :

I having a config.tpl.js with :

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

.constant('appConfig', {

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

Then, in my 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.

For client side code you should just use $http.get to get the json file from the server. Assuming the json file is http accessible at /manage/config.json you would do:

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

$http automatically does json parsing for you.

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

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