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/