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/




