Question

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

Was it helpful?

Solution

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.

OTHER TIPS

What you're looking for is $locale.

There is actually an example about half way down the angularjs homepage as well.

A snippet from their example:

function BeerCounter($scope, $locale) {
  $scope.beers = [0, 1, 2, 3, 4, 5, 6];
  if ($locale.id == 'en-us') {
    $scope.beerForms = {
      0: 'no beers',
      one: '{} beer',
      other: '{} beers'
    };
  } else {
    $scope.beerForms = {
      0: 'žiadne pivo',
      one: '{} pivo',
      few: '{} pivá',
      other: '{} pív'
    };
  }
}

I'm not sure if it's a "standard" per say... but it's a start. If you had a lot of localization to do, I think I would just create a service to inject in my controllers... something like this psuedo-code:

app.service('myLocalization', ['$locale', function($locale) {
    var res = {
       'help' : { 
           'en-us': 'help',
           'es-mx': 'ayudame'
       },
       'beer' : {
            'en-us': 'beer',
            'es-mx': 'cerveza'
       }
    }

    return {
       getString: function(key) {
          return res[key][$locale.id];
       }
    }
});

I've created a module specifically for localization purposes - https://github.com/4vanger/angular-l10n It supports message localization, parameter substitutions, change locale on flight and provides number of handy ways to use it - filters, directives etc.

Just for completeness of information - beginning somewhere within the AngularJS 1.4 stream - there will be another i18n implementation right out of the core. Please have a look at https://github.com/angular/i18n

you can also check this out:

https://github.com/angular-ui/ui-utils/pull/173

the performance is better than any of the other i18n libraries available for angular at the moment.

If your looking for i18n support then you can refer the below project which has the full multilingual capability and also easy to implement. Take a look at github project

angularjs-localizationservice

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top