Creating a user-overridable config system in AngularJS

Question

I'm working on a angularJS-based tool for building charts and am wanting to create a user-overridable config system — i.e., default values are loaded from one config file, which are then overridden if another config file exists.

Here's what I have so far:

angular.module('axisJSApp')
  .provider('configProvider', function () {
    this.$get = function axisJSConfig($http, $q) {
      var defaultConfig = $http.get('default.config.yaml');
      var userConfig = $http.get('config.yaml');

      return $q.all([defaultConfig, userConfig]).then(function(values){
        var defaultConfigYaml = jsyaml.safeLoad(values[0].data);
        var userConfigYaml = jsyaml.safeLoad(values[1].data);
        return angular.extend(defaultConfigYaml, userConfigYaml);
      });
    };
  });

Then in my controller:

angular.module('axisJSApp')
  .controller('MainCtrl', function (configProvider, $scope) {
    configProvider.then(function(appConfig){
      console.dir(appConfig); // Config loaded, everything else happens.
    });
  });

This all works fine if both default.config.yaml and config.yaml exist. My question is, how do I cause $q.all() to fail gracefully if config.yaml doesn't exist?

Additionally, is there any way of synchronously loading the config file so I don't have to wrap my entire controller in a .then()?

Thanks!

Nikos Paraskevopoulos · Accepted Answer · 2014-10-22 14:55:31Z

1

One way I can think of to handle the non-existence of config.yaml gracefully is:

var userConfig = $http.get('config.yaml').then(
    function(response) {
        return response.data;
    },
    function(response) {
        if( response.status === 404 ) {
            response.data = {};
            return response;
        }
        else {
            return $q.reject(response);
        }
    }
);

return $q.all([defaultConfig, userConfig]).... // AS BEFORE

So you manually fix the "does not exist" case, by returning an empty object in response.data (or anything that suits your needs).

I cannot think of an elegant way to load the config files synchronously; if you are using ngRoute, you could use the resolve configuration for the route (more here) to feed the controller with the data before it starts.

answered Oct 22, 2014 at 14:55

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

1 Comment

aendra Over a year ago

That's all super helpful. Using ngRoute is an interesting idea, hadn't considered that. Thank you!

Collectives™ on Stack Overflow

Creating a user-overridable config system in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related