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
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.
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.