Olá Pessoal,
No post de hoje vou mostrar como suportar internacionalização para quem está usando AngularJS.
Lets go
O angularJS suporta internacionalização ?
Sim, mas com limitação, e muita até. Como, 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.
E o que faç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, iai? 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 steps:
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
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)
var $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.
GitHub
https://github.com/camilolopes/workspaceAngularJs
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
Abraços, see ya!!
