Your SlideShare is downloading. ×
Angular translate
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Angular translate

288
views

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.

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 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
288
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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