angular translate
DESCRIPTION
Translate your angular application with angular translate by Pascal Precht. It's a module consisting of filters, services and directives for translating various strings.TRANSCRIPT
![Page 1: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/1.jpg)
Hi there!
my name is Sebastian
I’m working at Mayflower
and I’m doing a lot of JavaScript, writing and talking
![Page 2: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/2.jpg)
翻訳
![Page 3: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/3.jpg)
?
![Page 4: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/4.jpg)
Translation
![Page 5: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/5.jpg)
Translation in
![Page 6: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/6.jpg)
with
![Page 7: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/7.jpg)
How do I get this?
bower install angular-translate
![Page 8: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/8.jpg)
Anyone here not using
Bower?
![Page 9: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/9.jpg)
Use it!
![Page 10: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/10.jpg)
How do I include this in my App?
![Page 11: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/11.jpg)
How do I include this in my App?
1. Load the Script!
<script src="angular-translate.js"></script>
![Page 12: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/12.jpg)
How do I include this in my App?
2. Include it into your module!
var app = angular.module('translate', [‘pascalprecht.translate']);
![Page 13: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/13.jpg)
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’);!});
![Page 14: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/14.jpg)
How do I include this in my App?
4. Include the translate filter in your templates!
<h1>{{ 'HELLO' | translate }} {{ name }}</h1>
![Page 15: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/15.jpg)
DONE!
![Page 16: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/16.jpg)
Change the language?
![Page 17: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/17.jpg)
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>
![Page 18: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/18.jpg)
Change the language?
2. The $translate-Service in the controller!
app.controller('contentCtrl', ['$scope', '$translate', function($scope, $translate) {
![Page 19: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/19.jpg)
Change the language?
3. Translate it!
$scope.translate = function(lang) {! $translate.use(lang);!}
![Page 20: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/20.jpg)
DONE!
![Page 21: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/21.jpg)
What happens, if I don’t have a translation?
Uhm… actually nothing… !
The original string is displayed
![Page 22: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/22.jpg)
Translations in my source?
![Page 23: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/23.jpg)
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
![Page 24: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/24.jpg)
Features?
![Page 25: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/25.jpg)
Translate Service
app.controller(‘myCtrl’, [‘$scope’, ‘$translate’, function($scope, $translate) {! $translate(‘HELLO’)! .then(function(hello) {! $scope.hello = hello;! });!}]);
![Page 26: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/26.jpg)
Translate Directive
<div translate>HELLO</div>!<div translate=“HELLO”></div>!<div translate>{{ “HELLO” }}</div>!<div translate=“{{ ‘HELLO’ }}></div>
![Page 27: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/27.jpg)
Variables in Translations{! HELLO: “Hello {{username}}”!}
$translate(‘HELLO’, {username: ‘World’});
{{ ‘HELLO’ | translate: ‘{username: “World”}’ }}
<div translate=“HELLO”! translate-values=“{username: ‘World’}”></
div>
![Page 28: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/28.jpg)
Pluralizationbower 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>
![Page 29: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/29.jpg)
Pluralization
{! LIKE: '{GENDER, select, male{He} female{She} other{They}} liked this.'!}
{{ ‘LIKE’ | translate: “{GENDER: ‘male’}” }}!{{ ‘LIKE’ | translate: “{GENDER: ‘female’}” }}
![Page 30: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/30.jpg)
Thank you!
![Page 31: Angular translate](https://reader034.vdocuments.site/reader034/viewer/2022042512/5564b121d8b42a98268b4ecc/html5/thumbnails/31.jpg)
KONTAKT
Sebastian Springer [email protected] !Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland !@basti_springer !https://github.com/sspringer82