Talking AngularJS and Internationalizing in Berlin

Yesterday we attended the AngularJS Meetup Berlin, that took place at the Bitcrowd offices. Pascal Precht (CouchCommerce, sofa.io) talked about ‘i18n with angular-translate‘, or:
“going beyond basic localization with angular-translate”.

Starting with an introduction to AngularJS, Pascal evangelized the JavaScript framework (or rather: HTML compiler) that gives you two way binding (ng-model, ng-repeat) and dependency injection. And is built with testability in mind.

Fun fact: did you know that the draggable AngularJS logo is supported in less than a one-liner:
<div draggable=""></div>

… admittedly, the underlying JS code is a little more verbose, but there’s no real magic involved.

Table of Contents

• What about i18n?
• How to get started

What about i18n?

Internationalizing an application means abstracting all of the strings and other locale-specific bits out of an application. Localizing an application means providing translations and localized formats for the abstracted bits.

The status quo of Internationalization in AngularJS is rather limiting, says Pascal. For each dialect there’s a nglocale module, but only 1 per runtime. Then there’s a date filter, number filter, currency filter and ngPluralize works out-of-the-box, but that’s about it. In comes angular-translate, which covers:
– Typical components: service, filter, directive
– Variable replacement
– Multi-language support
– Fallback languages
– Asynchronous loading
… and much more.

How to get started

Can’t wait to get started? Clone the git repository, download angular-translate from the website or install the module via Bower:
$ bower install angular-translate

And make sure to embed the script in your HTML document:
<script src="path/to/angular-translate.js"></script>

Angular-translate is a community driven project and Pascal encouraged all attendees to take a look under the hood. You can find Pascal’s slides on his website.