Translate how to make a dynamic JSON entry

Question

I init the first time my $translateProvider as this:

app.config(["$translateProvider", function ($translateProvider) {
    $translateProvider.translations('en', translate_EN);
    $translateProvider.preferredLanguage('en');
}]);

Then I want to give later another JSON without any reload of page to en how can I do that?

Answer 1

Approach - 1 :

inside app.config function set translateProvider as below:

$translateProvider.useStaticFilesLoader({
   prefix: 'Scripts/App/resources/_',
   suffix: '.json'
});
$translateProvider.preferredLanguage('en_US');

When change the language just call :

$translateProvider.preferredLanguage('<name of language file>'); 
// say en_US or anything else which is selected.

In above code I have assume that name of resource file given as below:

Scripts/App/resources/_en_US.json

Approach - 2 :

inside app.config

$translateProvider.useLoader('customLoader');

For CustomLoader :

angular.module('myapp').factory('customLoader', function ($q, TranslationService) {

    return function (options) {
        var deferred = $q.defer();

          deferred.resolve(TranslationService.getLanguages().filter(function(lang){
                return lang.key == options.key
          })[0].values);

        return deferred.promise;
    };

});

In TranslationService file:

angular.module('myapp').factory('TranslationService', function () {
    var languages = [];

    return {
        setLanguages: function (data) {
            languages = data;
        },

        getLanguages: function () {
            return languages;
        }
    }
});

I am not sure but I think it works for you in case of dynamic resource.

//app.config

$translateProvider.preferredLanguage('en');
    $translateProvider.translations('en',{   // replace with dynamic val from service
      'TITLE': '{{ title }}',
      'SUBTITLE': '{{ subtitle }}',
      'STATIC': 'This is static'
    });

let me know which approach is work for you. Happy coding.