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!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?