Search code examples
angularjsangular-moduleangular-config

How to get config values from server in Angular?


My application needs some config values on application startup. Suggestions from the community is to store them as constant as separate module, preferably in separate .js file. This might work for me.
However my configuration values are also stored on the server, and dont want to duplicate those on client side, so i was thinking of making server call to get those.
Im newbie to angular, is it valid design practice to make server call in module's config method? If yes then should i just use $http service to get the values from the server?

    var main = angular.module('myapp', ['AdalAngular']);

    main.config(['$stateProvider',$httpProvider, adalAuthenticationServiceProvider', function ($stateProvider,$httpProvider,adalProvider) {

        // $stateProvider configuration goes here

        // ?????CAN I make server call here to get configuration values for adalProvider.init method below???

        adalProvider.init(
            {
                instance: 'someurl', 
                tenant: 'tenantid',
                clientId: 'clientid',
                extraQueryParameter: 'someparameter',
                cacheLocation: 'localStorage',
            },
            $httpProvider
            );

    }]);

    main.run(["$rootScope", "$state", .....
        function ($rootScope, $state,.....) {

            // application start logic

        }]);


    main.factory("API", ["$http", "$rootScope", function ($http, $rootScope) {

        // API service that makes server call to get data

    }]);

EDIT1

So based on suggestions below I'm going with declaring constant approach. Basically I will have separate config.js file and during deployment process I will overwrite the config.js file with respective environment based config.js file.

Question
If have to 10 constants then i have to pass them separately to module.config(). Is it possible to declare constant value as JSON object and somehow read it in config function so I don't have pass 10 different parameters?

angular.module('myconfig', [])
            .constant('CONFIGOBJECT','{Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue}');

and then how do I read the values in config method?

var main = angular.module('myapp',['myconfig']);
main.config(['CONFIGOBJECT',function(CONFIGOBJECT){

 ?? How do I read CONFIGOBJECT value that is a string not json object?

})

Solution

  • You cannot inject a service into the config section.
    You can inject a service into the run section.

    So, you cannot use - for example $http service to retrieve data from server inside config() , but you can do in inside run(), which initializes the provider's service.

    See also more complete answer here.

    Hope this helps.

    UPDATE:

    Why string? Why don't you simply use

    .constant('CONFIGOBJECT', {Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue}
    

    for

    .constant('CONFIGOBJECT', '{Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue}'
    

    ?