Date post: | 27-May-2015 |
Category: |
Business |
Upload: | sebastian-springer |
View: | 342 times |
Download: | 6 times |
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 [email protected] !Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland !@basti_springer !https://github.com/sspringer82