Provedor de internacionalização para AngularJS

Existe mais de uma forma de fazer traduções (i18n) em projetos AngularJS. Em minha opinião, a melhor é https://angular-translate.github.io/, mas vou mostrar aqui como eu tenho feito traduções em meus pequenos projetos AngularJS (normalmente projetos Ionic).

Eu fiz um pacote com minha solução personalizada e criei um pacote bower pronto para usar através da linha de comando:

bower install ng-i8n --save

Primeiro, adicionamos nosso provedor:

<script src='lib/ng-i8n/dist/i8n.min.js'></script>

E então adicionamos nosso novo módulo (‘gonzalo123.i18n’) ao projeto AngularJS.

angular.module('G', ['ionic', 'ngCordova', 'gonzalo123.i18n'])

Agora estamos prontos para inicializar nosso provedor com a linguagem padrão e os dados de tradução.

.config(function (i18nProvider, Conf) {
    i18nProvider.init(Conf.defaultLang, Conf.lang);
})

Eu gosto de usar constants para armazenar a linguagem padrão e a tabela de tradução, mas isso não é necessário. É possível apenas passar a linguagem default e o objeto Lang para nosso provedor.

.constant('Conf', {
    defaultLang: 'es',
    lang: {
        HI: {
            en: 'Hello',
            es: 'Hola'
        }
    }
})

E é isso. Podemos traduzir chaves em templates (o projeto também oferece um filtro):

<h1 class="title">{{ 'HI' | i18n }}</h1>

E também dentro dos controllers:

.controller('HomeController', function ($scope, i18n) {
    $scope.hi = i18n.traslate('HI');
})

Se precisar mudar a linguagem do usuário, basta ativar a função “use”:

.controller('HomeController', function ($scope, i18n) {
    $scope.changeLang = function(lang) {
        i18n.use(lang);
    };
})

Aqui, podemos ver o código do nosso provedor:

(function () {
    "use strict";
 
    angular.module('gonzalo123.i8n', [])
        .provider('i18n', function () {
            var myLang = {},
                userLang = 'en',
                translate;
 
            translate = function (key) {
                if (myLang.hasOwnProperty(key)) {
                    return myLang[key][userLang] || key;
                } else {
                    return key;
                }
            };
 
            this.$get = function () {
                return {
                    use: this.use,
                    translate: translate
                };
            };
 
            this.use = function (lang) {
                userLang = lang;
            };
 
            this.init = function (lang, conf) {
                userLang = lang;
                myLang = conf;
            };
        })
 
        .filter('i18n', ['i18n', function (i18n) {
            var i18nFilter = function (key) {
                return i18n.translate(key);
            };
 
            i8nFilter.$stateful = true;
 
            return i18nFilter;
        }])
    ;
})();

E o projeto está na minha conta no GitHub.

***

Gonzalo Ayuso faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://gonzalo123.com/2015/07/20/i8n-angularjs-provider/