I am new to angular js. For language translation I am using angular-translate service in my work.I am getting the entire translations which I need to assign in $translateProvider by an API call response.I know that I can assign the translations to $translateprovider ($translateprovider.translations ('en',translations) only from config module but I think that an API call from config module is not a good practise.
Below given is my config module.
.config(['$translateProvider', function($translateProvider) {
//fetching session key
var response;
jQuery.ajax({
type: "GET",
url: 'https://abcdefg/session?appKey=123456',
async: false,
success: function(data) {
response = data;
getMetaData(response.sessionKey);
}
});
////fetching data.
function getMetaData(sessionKey) {
jQuery.ajax({
type: "GET",
url: 'https://abcdefg/metadata?sessionKey=' + sessionKey +
'&gid=1.2.3.4',
async: false,
success: function(data) {
dataSet = data; //save response in rootscope variable
}
});
}
$translateProvider.translations('en_US', JSON.parse(dataSet.en_us));
$translateProvider.translations('es_ES', JSON.parse(dataSet.es_es));
$translateProvider.preferredLanguage('en_US');
}
How can this be solved? How can I assign translations to $translateProvider from out side the config module?
Thanks in advance.
Take a look at this answer from the creator of angular-translate , where he states that "[...]there's no way to extend existing translations during runtime with $translate service without using asynchronous loading.[...]"
For more information on asynchronous loading of translations take a look at the documentation . You may even specify your own custom loader to get translations by calling your API.
By many purposes, we may need to add more translations in Services, so I found a way to do that. We can create another CustomProvider which returns $translateProvider, and then we can inject CustomProvider to Services or Controllers.
// NOTE: Create another Provider returns $translateProvider
.provider('CustomProvider', function($translateProvider) {
this.$get = function() {
return $translateProvider;
};
});
// NOTE: Inject CustomProvider to Service to use
.factory('TranslationService', function(CustomProvider) {
console.log(CustomProvider);
return {
addMoreTranslations: addMoreTranslations
};
function addMoreTranslations(key, translations) {
// Do somethings
CustomProvider.translations(key, translations);
}
});
I succeeded by that way.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.