Tworzenie aplikacji wielojęzykowych

w

Bartłomiej Narożnik

Agenda

• Podejścia do tłumaczenia stron

• Angular Translate

• Wykrywanie języka dla użytkownika

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 2

Zarządzanie wielojęzykowością

• Podejście monarchistyczne

• Podejście anarchistyczne

• Podejście federalistyczne

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 3

• Filter

• Directive

• Service

• Asynchroniczne tłumaczenie

• Obsługa pluralizacji

• Tłumaczenie fragmentów HTML

• Obsługa błędów

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 4

Konfiguracja

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 5

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

app.config(['$translateProvider', function ($translateProvider) { $translateProvider .translations('pl', translations) .preferredLanguage('pl'); } ]);

Struktura tłumaczenia

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 6

var translations = { TITLE: 'Pan Tadeusz', AUTHOR: 'Adam Mickiewicz', CHAPTERS: { CHAPTER1_TITLE: 'KSIĘGA PIERWSZA: GOSPODARSTWO' } };

$translate service

app.controller('Controller1', ['$scope', '$translate',

function ($scope, $translate) {

$translate('TITLE').then(function (title) {

$scope.title = title;

});

$translate(['AUTHOR', 'PUBLICATION.YEAR'])

.then(function (translations) {

$scope.author = translations.AUTHOR;

$scope.pubYear = translations['PUBLICATION.YEAR'];

});

$scope.paragraph1 = $translate.instant('PARAGRAPH.PART1');

} ]);

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 7

Filter

<h1>{{'TITLE' | translate}}</h1>

<p>{{'AUTHOR' | translate}}</p>

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 8

Directive

<p translate>AUTHOR</p>

<p translate="AUTHOR"></p>

<p translate>{{translationKey}}</p>

<p translate="{{translationKey}}"></p>

<p data-translate>AUTHOR</p>

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 9

Przetwarzanie zmiennych

{

"AUTHOR_INFO": "Author name is {{name}}"

}

<p translate="AUTHOR_INFO" translate-values="{ name: 'Adam Mickiewicz'}"></p>

<p translate="AUTHOR_INFO" translate-value-name="Adam Mickiewicz"></p>

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 10

Zmiana języka

app.controller('Controller2',['$translate', '$scope', function ($translate, $scope) {

$scope.changeLanguage = function (langKey) {

$translate.use(langKey);

};

} ]);

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 11

Pluralizacja (Przy wykorzystaniu MessageFormat.js)

$translateProvider.useMessageFormatInterpolation(); $translateProvider.translations('en', { RESULT: "{GENDER, select, male {He} female {She} other {They}} found {NUM_RESULTS, plural, one {1 result} other {# results}}" });

<p translate="RESULT" translate-values="{GENDER: 'male', NUM_RESULTS: 3}" translate-interpolation="messageformat"></p>

Wynik: „He found 3 results”

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 12

Obsługa błędów - standardowa

$translateProvider.useMissingTranslationHandlerLog();

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 13

$translateProvider

.useMissingTranslationHandler('customTranslationHandler');

app.factory('customTranslationHandler', function () {

return function (translationID, uses) {

return 'Missing Translation';

};

});

Obsługa błędów - własna

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 14

Zdarzenia

• $translateChangeStart • $translateChangeSuccess • $translateChangeError • $translateChangeEnd

• $translateLoadingStart • $translateLoadingSuccess • $translateLoadingError • $translateLoadingEnd • $translatePartialLoaderStructureChanged

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 15

Bezpieczeństwo

$translateProvider.useSanitizeValueStrategy('sanitize');

• sanitize: używa $sanitize

• escape: escapes HTML in the translation

• sanitizeParameters

• escapeParameters

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 16

Wykrywanie języka

$translateProvider.determinePreferredLanguage();

navigator.languages[0]

navigator.language

navigator.browserLanguage

navigator.systemLanguage

navigator.userLanguage

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 17

Pobieranie języka z nagłówka HTTP

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS 18

19

• http://angular-translate.github.io/

• http://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference

• http://www.euroconferences.info/proceedings/2005_Proceedings/2005_Sandrini_Peter.pdf

mailto:bartek.naroznik@op.pl

Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS

Źródła