0
Hi there!
my name is Sebastian
I’m working at Mayflower
and I’m doing a lot of JavaScript,
writing and talking
翻訳
?
Translation
Translation in
with
How do I get this?
bower install angular-translate
Anyone here not using
Bower?
Use it!
How do I include this
in my App?
How do I include this in my
App?
1. Load the Script!
<script src="angular-translate.js"></script>
How do I include this in my
App?
2. Include it into your module!
var app = angular.module('translate',
[‘pascalprecht.tran...
How do I include this in my
App?
3. Configure it!
app.config(function($translateProvider) {!
$translateProvider.translation...
How do I include this in my
App?
4. Include the translate filter in your templates!
<h1>{{ 'HELLO' | translate }} {{ name }...
DONE!
Change the
language?
Change the language?
1. Some buttons with ng-click!
<button ng-click="translate('de')">deutsch</button>!
<button ng-click=...
Change the language?
2. The $translate-Service in the controller!
app.controller('contentCtrl', ['$scope',
'$translate', f...
Change the language?
3. Translate it!
$scope.translate = function(lang) {!
$translate.use(lang);!
}
DONE!
What happens, if I don’t
have a translation?
Uhm… actually nothing…
!
The original string is displayed
Translations in my source?
Translations in my source?
define([‘angular', ‘translations/de‘],
function(angular, transEs) {!
! …!
app.config(function($...
Features?
Translate Service
app.controller(‘myCtrl’, [‘$scope’,
‘$translate’, function($scope, $translate) {!
$translate(‘HELLO’)!
....
Translate Directive
<div translate>HELLO</div>!
<div translate=“HELLO”></div>!
<div translate>{{ “HELLO” }}</div>!
<div tr...
Variables in Translations
{!
HELLO: “Hello {{username}}”!
}
$translate(‘HELLO’, {username: ‘World’});
{{ ‘HELLO’ | transla...
Pluralization
bower install angular-translate-interpolation-
messageformat
$translateProvider.useMessageFormatInterpolatio...
Pluralization
{!
LIKE: '{GENDER, select, male{He} female{She}
other{They}} liked this.'!
}
{{ ‘LIKE’ | translate: “{GENDER...
Thank you!
KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
!
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
!
@b...
Nächste SlideShare
Wird geladen in ...5
×

Angular translate

352

Published on

Translate your angular application with angular translate by Pascal Precht. It's a module consisting of filters, services and directives for translating various strings.

Published in: Business
0 Kommentare
1 Gefällt mir
Statistiken
Notizen
  • Hinterlassen Sie den ersten Kommentar

Keine Downloads
Views
Gesamtviews
352
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
1
Einbettungen 0
No embeds

No notes for slide

Transcript of "Angular translate"

  1. 1. Hi there! my name is Sebastian I’m working at Mayflower and I’m doing a lot of JavaScript, writing and talking
  2. 2. 翻訳
  3. 3. ?
  4. 4. Translation
  5. 5. Translation in
  6. 6. with
  7. 7. How do I get this? bower install angular-translate
  8. 8. Anyone here not using Bower?
  9. 9. Use it!
  10. 10. How do I include this in my App?
  11. 11. How do I include this in my App? 1. Load the Script! <script src="angular-translate.js"></script>
  12. 12. How do I include this in my App? 2. Include it into your module! var app = angular.module('translate', [‘pascalprecht.translate']);
  13. 13. How do I include this in my App? 3. Configure it! app.config(function($translateProvider) {! $translateProvider.translations('es', {! HELLO: '¡Hola'! });! $translateProvider.preferredLanguage(‘es’);! $translateProvider.fallbackLanguage(‘en’);! });
  14. 14. How do I include this in my App? 4. Include the translate filter in your templates! <h1>{{ 'HELLO' | translate }} {{ name }}</h1>
  15. 15. DONE!
  16. 16. Change the language?
  17. 17. Change the language? 1. Some buttons with ng-click! <button ng-click="translate('de')">deutsch</button>! <button ng-click="translate('en')">english</button>! <button ng-click="translate('es')">español</button>! <button ng-click="translate('jp')">日本の</button>
  18. 18. Change the language? 2. The $translate-Service in the controller! app.controller('contentCtrl', ['$scope', '$translate', function($scope, $translate) {
  19. 19. Change the language? 3. Translate it! $scope.translate = function(lang) {! $translate.use(lang);! }
  20. 20. DONE!
  21. 21. What happens, if I don’t have a translation? Uhm… actually nothing… ! The original string is displayed
  22. 22. Translations in my source?
  23. 23. Translations in my source? define([‘angular', ‘translations/de‘], function(angular, transEs) {! ! …! app.config(function($translateProvider) {! $translateProvider.translations('es', transEs);! $translateProvider.preferredLanguage('es');! }); ! …! });! require.js to the rescue
  24. 24. Features?
  25. 25. Translate Service app.controller(‘myCtrl’, [‘$scope’, ‘$translate’, function($scope, $translate) {! $translate(‘HELLO’)! .then(function(hello) {! $scope.hello = hello;! });! }]);
  26. 26. Translate Directive <div translate>HELLO</div>! <div translate=“HELLO”></div>! <div translate>{{ “HELLO” }}</div>! <div translate=“{{ ‘HELLO’ }}></div>
  27. 27. Variables in Translations {! HELLO: “Hello {{username}}”! } $translate(‘HELLO’, {username: ‘World’}); {{ ‘HELLO’ | translate: ‘{username: “World”}’ }} <div translate=“HELLO”! translate-values=“{username: ‘World’}”></ div>
  28. 28. Pluralization bower install angular-translate-interpolation- messageformat $translateProvider.useMessageFormatInterpolation(); <script src=“messageformat.js”></script>! <script src=“locale/es.js”></script>! <script src=“angular-translate-interpolation- messageformat”></script>
  29. 29. Pluralization {! LIKE: '{GENDER, select, male{He} female{She} other{They}} liked this.'! } {{ ‘LIKE’ | translate: “{GENDER: ‘male’}” }}! {{ ‘LIKE’ | translate: “{GENDER: ‘female’}” }}
  30. 30. Thank you!
  31. 31. KONTAKT Sebastian Springer sebastian.springer@mayflower.de ! Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland ! @basti_springer ! https://github.com/sspringer82
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×