Use ownProvider with $http call inside config

Question

I have read lots of information on SO that I can't have $http call inside config but what I can do is create own provider and use this provider inside a config.

But none of the topics I read show how to actually use the information gathered in API call in provider inside a config().

So the provider I created is this:

(function () {
    'use strict';

    angular
        .module('app', [])
        .provider('translateOwnProvider', Provider);

    function Provider () {
        this.$get = function($http) {

            $http({
                url: 'http://ipinfo.io/json',
                method: 'GET'
            })
            .then(function(response) {
                var homeCountry = response.data.country;
                var homeCountryLower = homeCountry.toLowerCase();
                console.log(response.data);
            }, function(errorCall) {
                console.log("error");
            });

            return homeCountryLower;
            // ?????
        };
    };

})();

So in line 23 (bottom of script) I return value, I don't know if it's actually a good way to do this, it's the first time I have tried this and need your help guys.

Next in config file named really common app.js I have config with

• routing
• setting a lenguage of user

the code is:

(function () {
    'use strict';

    angular
        .module('app', [
            'ngRoute',
            'pascalprecht.translate'
        ])
        .config(config);

    //$inject for minify issue
    config.$inject = ['$routeProvider', '$translateProvider', 'translateOwnProvider'];

    function config ($routeProvider, $translateProvider, translateOwnProvider) {
        $routeProvider
            .when('/', {
                controller: 'mainCtrl',
                templateUrl: 'views/main.html'
            })
            .otherwise('/');

        // add translation tables
         $translateProvider.translations('en', translationsEN);
         $translateProvider.translations('de', translationsDE);
         $translateProvider.translations('pl', translationsPL);

         // preferredLanguage is gather should be gather in provider
         $translateProvider.preferredLanguage('en');

         $translateProvider.fallbackLanguage('en');
         //fallbackLanguage in case somebody hides his IP
    };


})();

In line 28 I set a preferredLenguage and I want this to be a value returned in own provider: homeCountryLower.

At the moment I don't have any error in console but this doesn't work obviously and page doesn't load at all, it stays blank.

Answer 1

I finished with conclusion that it is not possible to use gathered info from backend call in config(). Maybe it is possible to use some kind of hack with resolve function but I couldn't figure it out.

What I did instead of this call is I used window.navigator.language in my config() so now my translation script is not based on user IP but it's based on user browser language. It's not as satisfying as IP because I still can have user which is from Poland and has browser set to english and then my page will display in english.

I could also write own service which would translate page for me but I really wanted to use angular-translate module: link to module.

Note that I used window.navigator.language not a $window because this second one is not achievable in config() as well. So my solution may cause some problems during testing.

I wrote this for anyone who will came into this topic in future.