AngularJS : Setting languages in angular-translate from Controller or Service

Question

I am interested in using angular-translate.

Due to a lot of setup calls that happen initially on startup, I cannot provide the language json during config. Nor is it possible to use the async loader. I need to be able to specify the languages from a controller or service at a later point.

$translateProvider.translations(.., ...) is the call to use, but $translateProvider isn't available in controllers or services, but seemingly only at config.

$translate doesn't seem to have the ability to load a language JSON.

Is there any workaround?

Mikko Viitala · Accepted Answer · 2014-09-11 10:50:56Z

First inject $translate into your controller.

app.controller('MainCtrl', function($scope, $state, $translate) {});

Then you can get and set current language with $translate.use().

var lang = $translate.use(); // holds current lang
$translate.use(lang);  // sets lang to use

If you need to add new translations after config, then you can use partial loaders.

// config example
app.config(function($translateProvider, $translatePartialLoaderProvider){
  // "known" translations here, in {lang}.main.json, if any
  $translatePartialLoaderProvider.addPart('main'); 
  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: '/path/to/files/{lang}.{part}.json'
  });
});

// controller
app.controller('MainCtrl', function($scope, $translate, $translatePartialLoader){
  $translatePartialLoader.addPart('translation');
  $translate.refresh();
  $translate.use('en');
});

// en.translation.json
{ "KEY" : "Value", ... }

If that is not dynamic enough, then you can always do the translation on-the-fly.

// config
app.config(function($translateProvider, $translatePartialLoaderProvider){
    $translateProvider.preferredLanguage('en');
    $translateProvider.translations('en',{
      'TITLE': '{{ title }}',
      'SUBTITLE': '{{ subtitle }}',
      'STATIC': 'This is static'
    });
});

// controller
app.controller('MainCtrl', function($scope, $translate){
  $scope.dynamic = {
    'title': 'This is my header',
    'subtitle': 'My subtitle'
  };
});

// template
<pre>{{ 'TITLE' | translate:dynamic }}</pre>
<pre>{{ 'SUBTITLE' | translate:dynamic }}</pre>
<pre>{{ 'STATIC' | translate }}</pre>

This would spit out something like

enter image description here

Manjeet Singh · Accepted Answer · 2019-09-27 10:03:48Z

4

Got there in the end.

in the .config

$translateProvider.useLoader('customLoader');

the 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;
    };

});

and then a TranslationService to share the data

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

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

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

edited Sep 27, 2019 at 10:03

Manjeet Singh

316 bronze badges

answered Sep 11, 2014 at 13:36

Joel Basson

2291 gold badge2 silver badges9 bronze badges

Comments

Konstantin Krass · Accepted Answer · 2014-09-11 08:31:36Z

2

Maybe check this:

http://www.ng-newsletter.com/posts/angular-translate.html

Under "Switching the language at runtime"

$translate.use(); // Returns the currently used language key
$translate.use('en'); // Sets the active language to `en`

app.controller('TranslateController', function($translate, $scope) {
  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
});

answered Sep 11, 2014 at 8:31

Konstantin Krass

8,6461 gold badge20 silver badges24 bronze badges

3 Comments

Joel Basson Over a year ago

That sets the current language, not the translations. I need to provide the translations from a controller or service

Konstantin Krass Over a year ago

Do you want to change the language live ? Why not just load all languages and then decide ?

Joel Basson Over a year ago

Because I don't have them available on startup nor are they available via a simple $http.get. I need to load them at a later stage from a controller or

Taner · Accepted Answer · 2014-09-24 14:06:36Z

this one works. storageService has local storage and after setting 'NG_TRANSLATE_LANG_KEY' in local storage. You can call it like below.

angular.module('myApp').run(['$rootScope', 'StorageService', function($rootScope, StorageService) {
    $rootScope.currentLanguage = StorageService.local.get('NG_TRANSLATE_LANG_KEY') || 'en'; 
}]);


<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="TranslateController" ng-init="changeLanguage(currentLanguage)">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" ng-click="changeLanguage('tr')">TR</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" ng-click="changeLanguage('en')">EN</a></li>
</ul>

Whisher · Accepted Answer · 2015-12-20 21:46:41Z

0

I think the best way to manage dynamically loading is in the resolve config router block like

resolve: {
    translatePartialLoader:  function loadPartialLoader($translate,$translatePartialLoader) {
        $translatePartialLoader.addPart('home');
        return $translate.refresh();
    }
}

answered Dec 20, 2015 at 21:46

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

Collectives™ on Stack Overflow

AngularJS : Setting languages in angular-translate from Controller or Service

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related