SérieAngularJS: Internacionalização com Angular-Translate

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:

angularjsangulartranslatelib

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.

angularjsvotenomovieapp

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!!

2 comentários em “SérieAngularJS: Internacionalização com Angular-Translate”

Deixe um comentário

O seu endereço de e-mail não será publicado.