Angular js support for localization

Chen Kinnrot picture Chen Kinnrot · Sep 30, 2012 · Viewed 73.5k times · Source

I tried to find documentation in AngularJS for supporting multiple languages with no success. Is localization supported?

Answer

Thomas Deutsch picture Thomas Deutsch · Feb 24, 2013

Take a look at angular-translate: https://github.com/angular-translate/angular-translate

for all DIY folks:

You can find localized files for angular: here

These files will help you with the build-in angular filters: date, currency and number. Amazing... so far.

Now you want to use your own texts, than all you need is the power of angular.js dependency injection. Create a new file like: "myTexts_en_us.js" and use $provide.value like this:

$provide.value("myTexts", {firstText : "This is my localized text"});

For details:
http://jsfiddle.net/4tRBY/24/

For real-world-use, you should add a filter: http://jsfiddle.net/4tRBY/41/

Tips:

  • Make sure to insert your new localization-file into your html by hand, JS or Server. (Server is the best choice here!)
  • if you include one of the angular-local files, you do not need to set it up in your app module. (you will have $locale automatically - see the fiddle)
  • add an id key to your $provide-value - and set the value to a language code you are using in your file - this will be come in handy for testing.