Angular translate

Hi there!

my name is Sebastian

I’m working at Mayflower

and I’m doing a lot of JavaScript, writing and talking

翻訳

?

Translation

Translation in

with

How do I get this?

bower install angular-translate

Anyone here not using

Bower?

Use it!

How do I include this in my App?

How do I include this in my App?

1. Load the Script!

<script src="angular-translate.js"></script>

How do I include this in my App?

2. Include it into your module!

var app = angular.module('translate', [‘pascalprecht.translate']);

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’);!});

How do I include this in my App?

4. Include the translate filter in your templates!

<h1>{{ 'HELLO' | translate }} {{ name }}</h1>

DONE!

Change the language?

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>

Change the language?

2. The $translate-Service in the controller!

app.controller('contentCtrl', ['$scope', '$translate', function($scope, $translate) {

Change the language?

3. Translate it!

$scope.translate = function(lang) {! $translate.use(lang);!}

DONE!

What happens, if I don’t have a translation?

Uhm… actually nothing… !

The original string is displayed

Translations in my source?

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

Features?

Translate Service

app.controller(‘myCtrl’, [‘$scope’, ‘$translate’, function($scope, $translate) {! $translate(‘HELLO’)! .then(function(hello) {! $scope.hello = hello;! });!}]);

Translate Directive

<div translate>HELLO</div>!<div translate=“HELLO”></div>!<div translate>{{ “HELLO” }}</div>!<div translate=“{{ ‘HELLO’ }}></div>

Variables in Translations{! HELLO: “Hello {{username}}”!}

$translate(‘HELLO’, {username: ‘World’});

{{ ‘HELLO’ | translate: ‘{username: “World”}’ }}

<div translate=“HELLO”! translate-values=“{username: ‘World’}”></

div>

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>

Pluralization

{! LIKE: '{GENDER, select, male{He} female{She} other{They}} liked this.'!}

{{ ‘LIKE’ | translate: “{GENDER: ‘male’}” }}!{{ ‘LIKE’ | translate: “{GENDER: ‘female’}” }}

Thank you!

KONTAKT

Sebastian Springer sebastian.springer@mayflower.de !Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland !@basti_springer !https://github.com/sspringer82