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 var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) { $translateProvider .translations('pl', translations) .preferredLanguage('pl'); } ]);
Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS
5
Struktura tłumaczenia var translations = { TITLE: 'Pan Tadeusz', AUTHOR: 'Adam Mickiewicz', CHAPTERS: { CHAPTER1_TITLE: 'KSIĘGA PIERWSZA: GOSPODARSTWO' } };
Bartłomiej Narożnik - Aplikacje wielojęzykowe w AngularJS
6
$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-valuename="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}" translateinterpolation="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
Obsługa błędów - własna $translateProvider .useMissingTranslationHandler('customTranslationHandler'); app.factory('customTranslationHandler', function () { return function (translationID, uses) { return 'Missing Translation'; }; });
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
Źródła • http://angular-translate.github.io/ • http://stackoverflow.com/questions/1043339/ja vascript-for-detecting-browser-languagepreference • 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