Localization in AngularJS

TL:DR;

https://angular-gettext.rocketeer.be/ is my prefered choice, its simple and easy to understand. https://angular-translate.github.io/ is a good option if you need something more complciated.

Whats the problem ?

Here we are talking about making the interface work in several languages, this covers labels and button text - but does NOT include translation of data we get back from the API - thats up to the providing service and may be quite a bit more complex.

Out of the box (https://docs.angularjs.org/guide/i18n):

  Angular supports i18n/l10n for date, number and currency
  filters.

  Localizable pluralization is supported via the 
  ngPluralize directive.

  Additionally, you can use MessageFormat extensions to
  $interpolate for localizable pluralization and gender
  support in all interpolations via the ngMessageFormat module.

  All localizable Angular components depend on locale-specific
  rule sets managed by the $locale service.

  There a few examples that showcase how to use Angular filters
  with various locale rule sets in the i18n/e2e directory of the
  Angular source code.

Not enough functionality to run a multi language app.

So module writers / the community have stepped up to fill the gap.

Finding a solution

As i see it, there are 4 paths you could take.

1. The biggest player - Angular Translate (https://angular-translate.github.io/)
2. 2nd place - Angular GetText (https://angular-gettext.rocketeer.be/)
3. Minor players - ngLocalize / angular-localize / others
4. Roll your own

I think we can discount 3 due to support and community and 4 due to https://en.wikipedia.org/wiki/Not_invented_here

Which leaves two, “Angular Translate” or “Angular GetText”.

Angular Translate

The “go to” solution, front runner by quite a long way. But is large and complex.

URL : https://angular-translate.github.io/  
Version : v2.11.0 
Stars : 3500+  
Contributors: 100 (2 active/main)
Open/closed issues :56 / 986
Last issue opened/closed : recently (24h)

Introduction : https://www.youtube.com/watch?v=C7xqaExvaQ4 (skip 10 mins at least in)

Translation format : MessageFormat

Angular GetText

Uses the well understood and stable “GetText” format.

URL : https://angular-gettext.rocketeer.be/
Version : v2.2.1
Stars : 562
Contributors: 17 (1 active/main)
Open/closed issues : 74 / 142
Last issue opened / closed : occasionally (1-2 weeks)

Introduction : http://video.webcamp.si/wc2014_bajt_frontend_translation/video/1/?t=03:32

Translation format : GetText

Comparison

Both authors of the project actually discussed their various merits in the issue queue of Angular GetText.

https://github.com/rubenv/angular-gettext/issues/3

Highlights from Angualar GetText author :

• We actually tried angular-translate first with the customer that I wrote angular-gettext for.
• [Angular Translate is a ] Fantastic library … we build our own solution for two reasons:
  1. We really hate maintaining these magic key-value maps.
  2. …MessageFormat, it’s too complicated…

Some other interesting discussion on HackerNews : https://news.ycombinator.com/item?id=7249440

Personal conclusion

I like the GetText solution.

I would say, try to use that first, then if you find it doesn’t fit for what you need, then look at the more complex solution (Angular Translate).

What do you think? Any experance with translation in Angular?

Other useful links

• Improve GetText performance - http://blog.altoros.com/speed-up-i18n-in-angularjs.html