Internacionalização com AngularJS

Eai galera, tudo certo? Hoje quero trazer um pouco minha experiencia com Internacionalização com AngularJS. Falando um pouco em desenvolvimento web, eu trabalhei um considerável período de tempo com Java e Java Server Faces e já me surgiu a necessidade de ter internacionalização em minha aplicação e por incrível que pareça o próprio JSF suportava isso muito bem(opinião e experiencia própria). Simplesmente criávamos um arquivo properties para cada região contendo nossas chaves e valores e definíamos ele no faces-config.xml e então o JSF fazia sua mágica e se virava “sozinho”. Então, com AngularJS isso também é possível? Sim, tem como! Fica tranquilo que já vamos ver.

O Angular por si só já suporta internacionalização para conversão de moedas e datas, porém ele não possuí nada para o conteúdo da aplicação. Como muitas pessoas já sabem, a comunidade do AngularJS é imensa e coisas novas são criadas a todo o momento e inclusive criaram o nosso grande salvador, o Angular Translate, que irá nos auxiliar a deixar nossa aplicação em multilinguagens. Então mãos as obras (no caso, teclado).

Como começar?

O primeiro passo é adicionar o Angular Translate ao nosso projeto (caso você não tenha nenhum projeto para fazer testes, recomendo que gere um usando o Yeoman (você pode encontrar um tutorial de como fazer isto aqui)):

Então entre dentro da pasta do seu projeto e execute este comando:

bower install angular-translate

Logo, se tudo der certo, ele irá fazer o download do angular-translate e adicionar ele dentro da pasta seuApp/bower_components/angular-translate.

Importando o Angular Translate para a aplicação

Enfim, agora que temos posse do arquivo angular-translate.min.js, precisamos importar ele para nossa aplicação e dizer que queremos usa-lo. Para fazer isso, basta abrir o template que possui os imports, no caso de quem gerou o projeto com o Yeoman, iremos abrir o arquivo index.html, e adicionar o caminho até o arquivo angular-translate.min.js:

<script src="bower_components/angular-translate/angular-translate.min.js"></script>

Logo depois só precisamos dizer para nossa aplicação que queremos usar o angular-translate. Então vamos abrir o arquivo de configuração da aplicação (onde é criado o modulo), no caso de quem usa o Yeoman, é o app.js, e vamos adicionar o angular-translate:

angular.module('app', ['pascalprecht.translate']);

Criando o arquivo com os conteúdos das páginas

Já com tudo importado, só precisamos configurar nosso arquivo que irá conter nosso conteúdo. A estrutura do arquivo é feita através de chave e valor. Então vamos criar um novo arquivo chamado internacionalizacao.js (ou qualquer outro nome) e definir os valores:

'use strict'

angular.module('app').config(['$translateProvider', function ($translateProvider) {
  $translateProvider.translations('en', {
    'app.name': 'AppName',
    'app.createdBy': 'Created by'
  });
 
  $translateProvider.translations('pt', {
    'app.name': 'App',
    'app.createdBy': 'Criado por'
  });
  $translateProvider.preferredLanguage('pt'); //aqui definimos qual sera a default
  $translateProvider.useSanitizeValueStrategy(null);
}]);

Em suma agora só precisamos usar nossas chaves para chamar o texto que quisermos. Temos duas formas de fazer isso: A primeira é usando diretiva:

<div ng-translate='app.name' />

Ou usando expressão:

{{'app.name' | translate}}

Enfim, espero ter ajudado você a entender um pouco mais sobre Internacionalização com AngularJS.

Nesse meio tempo você pode gostar também: Estrutura de dados – Fila