Интернационализация в AngularJS

Интернационализация с использованием angular-translate

| Категории: Javascript, AngularJS
Илья Овсянников

Иллюстрация локального сайта
Интернационализация охватывает много вопросов. В этой небольшой статье я расскажу о том, как начать работать с angular-translate. А вот и его возможности, о которых мы с вами узнаем:

  • предоставление нескольких языков с помощью json файлов (языковая таблица)
  • асинхронная загрузка языков с помощью расширения angular-translate - StaticFilesLoader
  • подключение запасного языка, если перевод слова на текущем не был найден.

###Настройка angular-translate

1
2
3
4
5
6
7
8
9
10
11
12
angular.module("myapp", ['pascalprecht.translate'])
.config(function ($translateProvider) {
    //язык по умолчанию
    $translateProvider.preferredLanguage('en');
    //запасной язык, если запись не была найдена на текущем языке
    $translateProvider.fallbackLanguage('es');
    //загружаем записи языков из файлов
    $translateProvider.useStaticFilesLoader({
        prefix: '', //относительный путь, например: /languages/
        suffix: '.json' //расширение файлов
    });
})

###Использование angular-translate

Ниже вы можете увидеть использование директивы в качестве атрибута и фильтра. В контроллере вы можете использовать сервис $translate.

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

###Выбор языка

А тут приведен код выпадающего меню для выбора языка и контроллера:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- html код -->
<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", function($scope, $translate) {
    //переменная для хранения выбранного языка
    $scope.selectedLanguage = $translate.proposedLanguage(); //по умолчанию
    $scope.changeLanguage = function () {
      //значение, передаваемое в метод use, должно быть обозначением локали, например: en-UK, en и т.д.
      $translate.use($scope.selectedLanguage);
    };
});

По мотивам Gerard Sans “Angular internationalisation”

Источники