Angular js support for localization

AngularjsLocalization

Angularjs Problem Overview


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

Angularjs Solutions


Solution 1 - Angularjs

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.

Solution 2 - Angularjs

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];
       }
    }
});

Solution 3 - Angularjs

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.

Solution 4 - Angularjs

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

Solution 5 - Angularjs

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.

Solution 6 - Angularjs

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionChen KinnrotView Question on Stackoverflow
Solution 1 - AngularjsThomas DeutschView Answer on Stackoverflow
Solution 2 - AngularjsBen LeshView Answer on Stackoverflow
Solution 3 - Angularjs4vangerView Answer on Stackoverflow
Solution 4 - AngularjsYoshView Answer on Stackoverflow
Solution 5 - AngularjstimothyswtView Answer on Stackoverflow
Solution 6 - AngularjskdsView Answer on Stackoverflow