Com o avanço tecnológico, aplicações atualmente têm o potencial de alcançar altitudes muito maiores do que esperávamos, – e isso inclui a expansão para outros países. Por isso, é interessante que sua aplicação esteja preparada para atender o publico que não entende o seu idioma, no nosso caso o português. Por exemplo, ao saber que o idioma inglês pode ser compreendido na maior parte do mundo, é importante nos adaptarmos a essa realidade, e que nossa aplicação preveja tal circunstância.

Nesse post vamos criar uma aplicação com AngularJS, e utilizar o angular-translate para traduzi-la de forma simples e efetiva.

Utilizaremos o yeoman generator para criar uma aplicação simples de exemplo.

Para começar, vamos rodar alguns comandos e criar nosso projeto:

1. mkdir translated-app # Cria um diretório para nosso projeto
2. cd translated-app # Entra nesse diretorio
3.  Instalar o NodeJS  e rodar npm install -g# Caso já tenha, pular para o próximo passo
4. npm install -g yo generator-fountain-webapp # instala o Fountain, gerador do Yeoman
5. yo fountain-webapp [nome do projeto] # Cria de fato o projeto
6. Algumas opções vão aparecer, selecione na ordem:
   1. Angular1
   2. none with bower
   3. pure old javascript
   4. sass
   5. a working landpage
   6. ui-router

Após rodar esses comandos, já temos um projeto criado e estamos prontos para prosseguir. 😀
Para finalmente rodar o projeto, utilize o comando gulp serve.

Para começar, vamos instalar o angular translate com o comando bower install angular-translate –save, e bower install angular-translate-loader-static-files –save, e no arquivo src/index.js, injetaremos pascalprecht.translate como dependência.

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

Dependência injetada, podemos partir para o próximo passo. Vamos agora configurar o angular-translate;
Ainda no arquivo index.js, adicione o código a seguir no fim do arquivo:

angular
 .module('app')
 .config(configTranslate, ['$translateProvider']);

 function configTranslate($translateProvider){

  $translateProvider.useStaticFilesLoader({
   prefix: 'app/translations/',
   suffix: '.json', 
  });

 $translateProvider.preferredLanguage('pt');

 }

Aqui definimos que as traduções virão de arquivos estáticos no caminho app/translations/, e no formato .json. Definimos, também, que o idioma default será o português (‘pt’).

O próximo passo é criar a pasta translations, e os arquivos de tradução que desejamos. Neste exemplo criaremos um arquivo com traduções em português e em inglês. Com a pasta e os arquivos criados, poderemos, então, estruturar nossas traduções. Os arquivos baseiam-se no formato chave : valor, portanto, nossa chave seria como um identificador para a tradução – e o valor a própria tradução.

{
 "TITULO" : "Sempre um prazer estruturar suas aplicações.",
 "OLA" : "'Olá, 'Olá!",
 "YEOMAN" : "Esse gerador do Yeoman permite que você comece qualquer aplicação web com a melhor experiência ..."
}

Vamos testar no arquivo title.html. Há duas maneiras de utilizar o translate no html:

1. Definir o atributo translate na própria tag e, dentro dela, colocar a chave que definimos anteriormente nos arquivos de tradução;
2. Criar uma estrutura dentro da tag, entre chaves, passando nossa chave de tradução, | (pipe), e a diretiva ‘translation’.

<div class="title">
 <h1 class="title-h1">{{'OLA' | translate}}</h1>
 <div>
  <img class="title-logo" src="http://fountainjs.io/assets/imgs/yeoman.png"/>
  <img class="title-logo" src="http://fountainjs.io/assets/imgs/fountain.png"/>
 </div>
 <h2 class="title-h2" translate>TITULO</h2>
</div>

Podemos ver a tradução ja está funcionando, mas agora precisamos de uma maneira de trocar o idioma. Vamos criar uma div contendo uma tag select, para escolher o idioma da aplicação.

<header class="header">
 <p class="header-title" style="flex: inherit;">
 <a href="https://github.com/FountainJS/generator-fountain-webapp" target="_blank">
 Fountain Generator
 </a>

  <div class="trocar-idioma">
  <select ng-model="idiomaSelecionado"
               ng-change="alterarIdioma(idiomaSelecionado)">

   <option ng-repeat="idioma in idiomas track by $index" value="{{idioma}}" translate>{{idioma}}</option>
  </select>
 </div>

 </p>
</header>

No nosso controller (header.js) criaremos o que nos falta para finalizar. Criaremos um array simples contendo as traduções que criamos,  e uma função para trocar o idioma.

Nota: o que passamos para o $translate.use() deve ser o nome dado aos nossos arquivos de tradução (pt, en).

(function(){

   'use strict';

   angular
     .module('app')
     .component('fountainHeader', {

        templateUrl: 'app/header.html',
       controller: HeaderController
    });

    HeaderController.$inject = ['$scope', '$translate', '$state'];

    function HeaderController($scope, $translate, $state) {


       $scope.idiomas = ['pt', 'en'];

       $scope.alterarIdioma = function (idioma) {
          $translate.use(idioma);
          $state.reload();
      }
   }

})();

Pronto! De uma maneira simples, criamos uma pagina que suporta diversos idiomas de tradução.