Coleção AngularJs Meetup South London | Este artigo

Internacionalização usando angular-translate

A internacionalização cobre muitos tópicos. Neste protocolo, fornecerei um esqueleto básico para começar a usar o angular-translate . Recursos mostrados neste protocolo:

- provide different languages using json objects (language table)
- language files will be loaded asynchronously using angular-translate extension *StaticFilesLoader*
- there will be a fallback language if a key is not found using the current language
- we will use a dropdown to let the user change the language

Um código de trabalho está incluído no final.

Configuração

angular.module("myapp", ['pascalprecht.translate'])
.config(function ($translateProvider) {
    //default language
    $translateProvider.preferredLanguage('en');
    //fallback language if entry is not found in current language
    $translateProvider.fallbackLanguage('es');
    //load language entries from files
    $translateProvider.useStaticFilesLoader({
        prefix: '', //relative path Eg: /languages/
        suffix: '.json' //file extension
    });
})

Usos

Abaixo você pode ver o uso da diretiva e do filtro de atributo. Em um controlador, você pode usar o serviço $ translate.

<h1 translate="title"></h1>
<h1>{{title | translate}}</h1>

Seleção de idioma

Trechos abaixo para o menu suspenso e controlador de idioma.

<!-- html code -->
<select ng-model="selectedLanguage" ng-change="changeLanguage()">
  <option value="en" translate="global_language_en"></option>
  <option value="es" translate="global_language_es"></option>
</select>

//controller
.controller("Controller", function($scope, $translate) {
    //variable to store selected language
    $scope.selectedLanguage = $translate.proposedLanguage(); //default

    $scope.changeLanguage = function () {
      //use parameter needs to be part of a known locale Eg: en-UK, en, etc
      $translate.use($scope.selectedLanguage);
    };
});

Recursos

guia de translação angular

Código de demonstração: link