How to read the json config file inside angular module?

Question

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.

Jscti · Accepted Answer · 2014-09-23 07:53:58Z

7

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.

answered Sep 23, 2014 at 7:53

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vinayak Garg Over a year ago

I did not require sharedVars, so I just used client side specific constants. This means I did not have to use & install grunt-preprocess

C0ZEN Over a year ago

Nice, this solution works as expected. Nevertheless I got an error with 'sharedVars : /* @echo SHARED_VARS */'. It's pretty obvious because it's a comment. Do you know if there is a way to avoid the detection of the error ?

Jscti Over a year ago

@C0ZEN the file containing the echo is just a template file, you're not supposed to use it as is. It's the generated file src/config.js that you should use.

C0ZEN Over a year ago

@Cétia I don't use it, but my IDE inspect it anyway and tell me that something is wrong. Plus the error when running grunt task.

Jscti Over a year ago

@C0ZEN Ha ok, I'm sure you can tell your IDE and linters to ignore tpl files ;)

basarat · Accepted Answer · 2014-09-23 06:37:03Z

5

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.

answered Sep 23, 2014 at 6:37

basarat

278k60 gold badges475 silver badges528 bronze badges

1 Comment

Vinayak Garg Over a year ago

The config file is present on client itself. I will clarify this in question.

Pranay Dutta · Accepted Answer · 2014-10-06 09:03:10Z

4

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'])

answered Oct 6, 2014 at 9:03

Pranay Dutta

2,5992 gold badges33 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to read the json config file inside angular module?

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related