Angular translate

945 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Business
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
945
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
20
Aktionen
Geteilt
0
Downloads
10
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×