Angular translate
Nächste SlideShare
Wird geladen in ...5
×

Das gefällt Ihnen? Dann teilen Sie es mit Ihrem Netzwerk

Teilen

Angular translate

  • 313 Views
Hochgeladen 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.

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

Mehr in: Business
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Hinterlassen Sie den ersten Kommentar
Keine Downloads

Views

Gesamtviews
313
Bei Slideshare
297
Aus Einbettungen
16
Anzahl an Einbettungen
1

Aktionen

Geteilt
Downloads
3
Kommentare
0
Gefällt mir
1

Einbettungen 16

http://www.slideee.com 16

Inhalte melden

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

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

Löschen
    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