Dynamic locale in AngularJS
As soon as one starts to deal with a multilingual application in AngularJS, he is faced with the fact that the $locale service is a read-only service.
As a end user of the application, I want to select the language I'm working with, and see the changes to the screen immediately applied.
In particular, I was also using the excellent angular-translate module for having my labels translated. I could change my locale for the translation module using $translate.use(locale)
, but the AngularJS locale itself was not changed - this made localised dates & times using the former selected locale. Very not good.
Here is the solution I have found for switching the language.
In the main module file, I add, before the module declaration, a detection of the current locale. In my case, I chose to store it locally, but it could be any other mechanism:
// Local storage for the locale
if (console) console.log('[language] Checking language on load');
var language = localStorage['iteachLanguage'];
if (!language) {
if (console) console.log('[language] No language specified, using "en"');
language = 'en';
}
if (console) console.log('[language] Using ' + language);
Then, in the module loading itself, I load the corresponding ngLocale module (which are available though the angular-locale.js files distributed with Angular - pity they are not available yet through Bower):
angular.module('myapp', [
'ui.bootstrap',
'ui.calendar',
'ngRoute',
'ngSanitize',
'ngLocale_' + language,
'pascalprecht.translate',
...
Then, when the user selects a locale, I just have to store it locally and reload the page:
$scope.changeLanguage = function (lang) {
localStorage['iteachLanguage'] = lang;
location.reload();
};
Well, yes, I have to reload the page... But in such a case, I think this is acceptable.