AngularJS: how to use $http in config phase

Question

I am building a single page application using angular. We use Continuous Integration with several Dev and QA environments. This means that every time I deploy the app in a different environment I need to update some config parameters such as SPA baseUrl, rest api url or url for my oauth server.

To achieve this, our CI engine generates a config.json file with the correct parameters for each environment when we are about to deploy there. To get this I have created a really simple service:

(function () {
  'use strict';

  angular
    .module('app.core')
    .factory('config', config);

  config.$inject = ['$http'];

  function config($http) {
    return {
      load: load
    };

    //////////

    function load() {
      return $http.get('assets/config/config.json');
    }
  }
}());

Most of my services are configured through providers during the config phase. And here is where the problem comes up. As you know, services cannot be injected during this phase but I would like to use config service to set up my providers with the correct URLs and parameters.

Is there a proper way to do this?

The only thing I can consider so far is having these config parameters embed in my module creation file so they are there ready to use. It seems quite ugly since I don´t want any external process to my app modifying my source code.

Estus Flask · Accepted Answer · 2015-08-18 12:48:06Z

2

If these are asynchronous services that rely on config.json, it is perfectly ok to change the way they are configured and fit your config into async workflow, e.g.

app.factory('config', function ($http) {
  return $http.get('config.json', { cache: true })
    .then(function (response) {
      return response.data;
    });
});

app.factory('asyncService', function ($http, config) {
  return config.then(function (config) {
    return $http...
  }).then(...);
});

Otherwise the best option is to build json config to a service with Gulp/Grunt/whatever.

Think of

angular.module('config', []).constant('config', <%= configJson %>);

as of a compiled template rather than 'external process to my app modifying my source code'.

answered Aug 18, 2015 at 12:48

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

Comments

Tamy · Accepted Answer · 2015-08-18 10:53:27Z

1

What I am doing at the moment (but I am open for a better solution) is to have a separate config file with the json object that contains all the config info.

Example of the file content:

var appConfigInfo = {
    DEV: true,
    API_PATH: 'your_custom_url'
    // etc.
};

Then I add it as a constant in my app. Example:

angular
    .module('app', [])
    .constant('APP_CONFIG', appConfigInfo);

Now you can access all your configuration values via the constant. Don't forget to inject it in your controllers, etc.

I hope it helps.

answered Aug 18, 2015 at 10:53

Tamy

2031 silver badge8 bronze badges

2 Comments

jbernal Over a year ago

Thanks for the idea! I didn´t think about setting them as constants and then using then in my config phase. I will only add that if you set those constants to the $rootContext in your run block (such as: $rootScope.config = config;), then they are available for every single controller, reducing the number of times you need to inject them into your other components explicitly.

Tamy Over a year ago

I haven't considered this option. I'll give it a try :) Thanks!

Collectives™ on Stack Overflow

AngularJS: how to use $http in config phase

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related