Bartłomiej Narożnik - AngularJS

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.