Hi,
In the project I'm developing, also have the need for internationalization, to support it, I was thinking to create a service and then a filter, something like I show below:

Code for the service:
`
angular.module('adf').factory('adfLanguageService', function () {

var defaultLanguage, currentLanguage;
defaultLanguage = currentLanguage = 'en';

var locales, defaultLocales;
locales = defaultLocales = {
    'en': {
        'ADD-NEW-WIDGET': 'add new widget' ,
    },
    'pt': {
        'ADD-NEW-WIDGET': 'adicionar novo widget',
    }
};

return {
    setCurrentLanguage: function (newCurrentLanguage) {
        currentLanguage = newCurrentLanguage;
    },

    getCurrentLanguage: function () {
        return currentLanguage;
    },

    loadCustomLocales: function (customLocales) {
        //locales = $.extend(true, defaultLocales, customLocales);
        locales = angular.extend({}, defaultLocales, customLocales);            
    },

    setLabelByKey: function (key, text) {
        locales[currentLanguage][key] = text;
    },

    getLocale: function (key, lng) {
        return (locales[lng]) ? locales[lng][key] : locales[defaultLanguage][key];
    }
};

});`

Code for the filter:
// filter language angular.module('adf').filter('adfLocal', ['adfLanguageService', function (srv) { return function (key, lang) { return srv.getLocale(key, lang); }; }]);

Add new property to the scope of the directive:
scope: { language: '@' }
and set the new option in the link property:
link: function ($scope, $element, $attr) { ... var options = { language: $attr.language ... }

In the dashboard template:
<a href="" ... title="{{'ADD-NEW-WIDGET' | adfLocal:options.language}}" ...>

Finally in the sample page:
<adf-dashboard name="{{name}}" language="{{language}}" ... >
and in the controller:
$scope.language = "fr";

To set a new language we can call the service:
var customLocales = { 'fr' : { 'ADD-NEW-WIDGET': 'Ajouter un nouveau widget', 'EDIT': 'éditer', } }; adfLanguageService.loadCustomLocales(customLocales);
Or change only one key:
// set the current language adfLanguageService.setCurrentLanguage('fr'); // change the label ADD-NEW-WIDGET adfLanguageService.setLabelByKey('ADD-NEW-WIDGET', 'nouveau widget');

I hope this help you, and if you have some suggestion we appreciate,
NS

Internationalization #102

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions