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

1. Hi there!
my name is Sebastian
I’m working at Mayflower
and I’m doing a lot of JavaScript,
writing and talking

2. 翻訳

3. ?

4. Translation

5. Translation in

6. with

7. How do I get this?
bower install angular-translate

8. Anyone here not using
Bower?

9. Use it!

10. How do I include this
in my App?

11. How do I include this in my
App?
1. Load the Script!
<script src="angular-translate.js"></script>

12. How do I include this in my
App?
2. Include it into your module!
var app = angular.module('translate',
[‘pascalprecht.translate']);

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. How do I include this in my
App?
4. Include the translate filter in your templates!
<h1>{{ 'HELLO' | translate }} {{ name }}</h1>

15. DONE!

16. Change the
language?

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. Change the language?
2. The $translate-Service in the controller!
app.controller('contentCtrl', ['$scope',
'$translate', function($scope, $translate) {

19. Change the language?
3. Translate it!
$scope.translate = function(lang) {!
$translate.use(lang);!
}

20. DONE!

21. What happens, if I don’t
have a translation?
Uhm… actually nothing…
!
The original string is displayed

22. Translations in my source?

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. Features?

25. Translate Service
app.controller(‘myCtrl’, [‘$scope’,
‘$translate’, function($scope, $translate) {!
$translate(‘HELLO’)!
.then(function(hello) {!
$scope.hello = hello;!
});!
}]);

26. Translate Directive
<div translate>HELLO</div>!
<div translate=“HELLO”></div>!
<div translate>{{ “HELLO” }}</div>!
<div translate=“{{ ‘HELLO’ }}></div>

27. Variables in Translations
{!
HELLO: “Hello {{username}}”!
}
$translate(‘HELLO’, {username: ‘World’});
{{ ‘HELLO’ | translate: ‘{username:
“World”}’ }}
<div translate=“HELLO”!
translate-values=“{username: ‘World’}”></
div>

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. Pluralization
{!
LIKE: '{GENDER, select, male{He} female{She}
other{They}} liked this.'!
}
{{ ‘LIKE’ | translate: “{GENDER: ‘male’}” }}!
{{ ‘LIKE’ | translate: “{GENDER: ‘female’}” }}

30. Thank you!

31. KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
!
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
!
@basti_springer
!
https://github.com/sspringer82