Série AngularJS: Internacionalização com Angular-Translate – Parte 12
No artigo de hoje vou mostrar como suportar internacionalização para quem está usando AngularJS.
Olá, pessoal! No artigo de hoje vou mostrar como suportar internacionalização para quem está usando AngularJS.
O angularJS suporta internacionalização? Sim, mas com (muita) limitação. Por exemplo, ele consegue suportar internacionalização para datas, números, mas não suporta internacionalização para o conteúdo da sua aplicação.
Se você pesquisar na Internet pode encontrar alguns frameworks que ajudam na internacionalização. Eu pesquisei bastante e testei alguns, e o melhor foi esse aqui: Angular-Translate http://pascalprecht.github.io/angular-translate/#/guide.
Github https://github.com/PascalPrecht/angular-translate/wiki/Getting-Started#configuring-translateprovider
Pelo seguinte:
- Fácil de usar;
- Boa documentação;
- Comunidade bem ativa;
- Releases constantes;
- Bug fixing curto.
O ponto negativo que adiciono é que o autor colocou o nome dele na declaração do uso da API. Acho isso ruim, ‘pascalprecht.translate’. Se a API vira e o Google adota, e aí? Certamente eles vão tirar esse nome e deixar algo global. E a migração para o novo nome é fácil?
Outro ponto negativo é a forma de obter o arquivo .min.js. É preciso instalar o bower e rodar bower install angular-translate. Por que não disponibilizar o .min.js on-line no próprio github?
Para quem usa JSF, por exemplo, está acostumado a ter um arquivo .properties que possui uma key:value para tradução e o JSF se vira para saber o idioma do browser e faz o translate. Mas com AngularJS é um pouco diferente. Claro que não teremos um arquivo .properties, mas sim um arquivo .js que funciona da mesma forma key:value.
Na prática
Vou considerar que você já tem uma aplicação com Angular e agora quer apenas internacionalizar. Veja os passos:
Passo 1
O que achei ruim, apesar de ser rápido, é instalar o bower para obter o .min.js. Se você tiver o git bash, apenas digite “npm install -g bower”. Se tiver alguma dúvida, veja aqui: https://github.com/bower/bower
Passo 2
Após ter instalado o bower, vamos gerar o min.js do angular-translate no git bash: bower install angular-translate
Aguarde terminar a instalação e veja onde está o .min.js Será algo assim:
Xxx\bower_components\angular-translate
Passo 3
Copie o arquivo angular-translate.min.js para o seu projeto. No meu caso, eu tenho uma pasta lib somente para js, veja:
Passo 4
Crie um arquivo que terá a internacionalização, ou seja, que terá o que você gostaria que fosse traduzido (eu chamei de inter.js). O conteúdo é bem simples, veja:
$app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
'label.question.movie': 'What is your favorite movie?',
'label.title': 'Vote in Movie?',
});
$translateProvider.translations('pt', {
'label.question.movie': 'Qual filme você gosta mais?',
'label.title': 'Vote no Filme'
});
$translateProvider.preferredLanguage('en'); //temos que dizer qual é a default.
}]);
Passo 5
Após ter criado o arquivo que contém as mensagens de tradução, precisamos dizer ao Angular que vamos usar esse cara para isso. No arquivo js que você cria o module, vamos adicionar o translate (no meu caso é o arquivo application.js):
<b>var</b> $app = angular.module('app',['ngResource','pascalprecht.translate']);
Passo 6
No meu arquivo index.html preciso carregar o .js do angular-translate. Veja:
<body> <script src="js/lib/angular.js"></script> <script src="js/lib/angular-resource.js"></script> <script src="js/lib/jquery.js"></script> <script src="js/lib/angular-translate.min.js"></script> Outros codigos omitidos aqui </body>
Passo 7
Agora vamos chamar as keys que criamos no inter.js no nosso arquivo .html. Temos várias opções, veja:
Usando Diretivas
<H2 translate=“label.title”></H2>
Usando expression
{{movie.name}}
Passo 8
Salve as alterações, build o projeto e suba.
Um ponto importante: a tradução não vai ocorrer com base no idioma definido no browser e sim o que você setou como preferido. Infelizmente ainda não tem essa feature. Daí, para que o usuário queira ver aplicação no idioma dele, você terá que colocar algo como a bandeira do país na aplicação e, ao clicar, o valor do preferred é alterado. Na documentação tem um exemplo.
Vou ficando por aqui… Caso queiram ver aplicação movie-vote usando API basta ir ao meu github e fazer clone ou download e executar: https://github.com/camilolopes/workspaceAngularJs
Abraço!
é Bacharel em Sistemas de Informação e Especialista em Gestão e Estratégia de Negócios. Trabalha com TI desde 2003 e possui as certificações SCJP 5 e SCM. Trabalhou na IBM Brasil como Analista Programador Java, passou pelo laboratório da Enterprise Computing Lab (ECL) HP como Software Engineer, Ci&T como Engenheiro de Software em projeto JEE. Tem experiência internacional em Índia, Dubai e Londres. Atualmente é cofundador da ITSLabs (www.itslabs.com.br), uma start-up focada na criação de produtos web e mobile para start-ups. Também é autor dos livros "Guia do Exame SCJP", "Guia Prático JEE com Frameworks" e "TDD na prática".
