Angular translate
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Angular translate

am

  • 238 Views

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.

Statistiken

Views

Gesamtviews
238
Views auf SlideShare
222
Views einbetten
16

Actions

Gefällt mir
1
Downloads
3
Kommentare
0

1 Einbettung 16

http://www.slideee.com 16

Zugänglichkeit

Kategorien

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

Angular translate Presentation 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