By Pascal Precht / @PascalPrecht

Dutch AngularJS Meetup

Sup, guys.

This is me
(@PascalPrecht)

me

My boss.
Not as bad as he looks like.

neoskop-logo

heartworking heart

And I ♥ animated gifs


angular-translate-globus ?

Features

Service Filter Directive Variable replacement Multi-Language Support Asynchronous Loading Pluralization

Let's have a look!



...Okay, show us the bits!

Installation

Via Git


$ git clone git://github.com/PascalPrecht/angular-translate.git
$ cd angular-translate
$ npm install
$ bower install
...
$ grunt build

Via Bower


$ bower install angular-translate

Really, that's it!

...Or just click that button*





* http://pascalprecht.github.com/angular-translate

And last but not least...



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

Okay, we're ready to rock!

Let's build a little app.

Meet $translateProvider

$translateProvider




  • Teaches your app languages

  • Lets your app remember the language

  • Hooks up asynchronous loader

  • Manages interpolation services

Simply inject it!



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

app.config(['$translateProvider', function ($translateProvider) {
   // configuration code goes here...       
}]);

Teaching our app a language

How's the typical flow?




  • Provide i18n data (static, asynchronous...)

  • Let angular-translate know what languages are available

  • Translate your app using provided components

Registering translations




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

app.config(['$translateProvider', function ($translateProvider) {

  // static translation registration
   $translateProvider.translations({
      "APP_TITLE": "Dutch AngularJS Meetup",
      "INTRODUCTION_TEXT": "Come together and meet great people!"
   });

}]);

Translating our app



<h1>Dutch AngularJS Meetup</h1>
<p>Come together and meet great people!</p>

becomes

<h1>{{ "APP_TITLE" | translate }}</h1>
<p>{{ "INTRODUCTION_TEXT" | translate }}</p>

or

<h1 translate="APP_TITLE"></h1>
<p translate="INTRODUCTION_TEXT"></p>

Demo



(More on $translateProvider)

Wait!


This is just placeholding stuff, right?

What the fuck?




How about multi-language support?

Multi-Language

How's the typical flow?




  • Provide translation tables by language key

  • Tell angular-translate which language to use by default

Assigning language keys 




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

app.config(['$translateProvider', function ($translateProvider) {

  // static translation registration with language key
   $translateProvider.translations('en', {
      "APP_TITLE": "Dutch AngularJS Meetup",
      "INTRODUCTION_TEXT": "Come together and meet great people!"
   });

   $translateProvider.translations('de', {
      "APP_TITLE": "Niederländisches AngularJS-Treffen",
      "INTRODUCTION_TEXT": "Kommt zusammen und lernt tolle Leute kennen!"
   });
}]);

Telling which language to use



$translateProvider.preferredLanguage('en');

Demo

Switching the language at runtime

Introducing $translate.uses()



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

  $scope.switchLanguage = function (languageKey) {
    $translate.uses(languageKey);
  };

});

Markup

<ul ng-controller="langController">
  <li><button ng-click="switchLanguage('de')">German</button></li>
  <li><button ng-click="switchLanguage('en')">English</button></li>
</ul>

That's it! Check out the

Demo



(More about multi-language)

Okay, cool.


But I don't wanna blow up my JavaScript code.

That's okay.



I understand that.

Asynchronous Loading

Supported loaders (extensions)




  • UrlLoader

  • StaticFilesLoader

  • PartialLoader

StaticFilesLoader

Installation


$ bower install angular-translate-loader-static-files

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

Using the loader



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

app.config(['$translateProvider', function ($translateProvider) {

   // ... previous configuration

   $translateProvider.useStaticFilesLoader({
      prefix: 'lang-',
      suffix: '.json'
   });
}]);

Requests /lang-{languageKey}.json

Demo



(More about asynchronous loading)

Variable Replacement


a.k.a.

You have [count] new messages!

Translate directive



"INBOX_TEXT": "You have {{count}} new messages."

<p 
  translate="INBOX_TEXT"
  translate-values="{ count: 3 }" 
  ></p>

Result:

You have 3 new messages.

Translate filter



"INBOX_TEXT": "You have {{count}} new messages"

<p>{{ "INBOX_TEXT" | translate:{ count: 3 } }}</p>

Result:

You have 3 new messages.

Translate service



"INBOX_TEXT": "You have {{count}} new messages"

$scope.text = $translate('INBOX_TEXT', { count: 3 });

Result:

You have 3 new messages.

Demo



(More about variable replacement)

There is so much more to cover!

This project is


You!

Thanks!


By Pascal Precht / @PascalPrecht