I18N / Angular JS / Javascript Text

Question

I´m developing a Phonegap App based on Angular JS. I found 2 options for I18N in Angular JS:

1) https://github.com/gertn/ng-i18n

2) http://angularjs.de/artikel/angularjs-i18n-ng-translate

They both are very "simliar": There are placeholder (expressions) which will be translated.

So my question is: how to translate pure text in e.g. a notification alert which is inside an angular service (and not in an expression/placeholder)?

Solution 1

angular-translate lets you use their $translate service directly. Below is sample code from their documentation.

var translations = {
  HEADLINE: 'What an awesome module!',
  PARAGRAPH: 'Srsly!',
  NAMESPACE: {
    PARAGRAPH: 'And it comes with awesome features!'
  }
};

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
  // add translation table
  $translateProvider.translations(translations);
}]);

app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
  // expose translation via `$translate` service
  $scope.headline = $translate('HEADLINE');
  $scope.paragraph = $translate('PARAGRAPH');
  $scope.namespaced_paragraph = $translate('NAMESPACE.PARAGRAPH');
}]);

Solution 2

You may have a look at the jlg-i18n github project: https://github.com/jlguenego/jlg-i18n

The added value is:

1) There is no UPPERCASE_TAG like in the others solutions. Instead you put directly the text in the original language. So if no translation is found, the original string is printed and the degradation is not total. Example of an angular expression with i18n filter:

{{'How are you doing?' | i18n}}

2) There is a interpolation/pluralization functionnality.

{{'You have [[nbr]] message(s) and [[err]] error(s)' | i18n:4:0 }}

output:

You have 4 messages and no error.

Solution 3

Your 'pure' text is always a concrete translation. So if you want to bringt i18n to your notifications, your notifications have to use translation id's which can the be translated by a translate service (if you use angular-translate e.g.).

Especially, when using angular-translate, you could actually simply pass your concrete text to a translate component (service, filter directive). If there isn't a translation id in your translation table that looks like the passed value (in your case a concrete text) it'll return that string, so this will also work.

<ANY translate="{{notificationFromService}}"></ANY>

If you have any further questions about angular-translate, please lemme know!

Solution 4

For Translating inside a service, just add the translation service to the service, like the way you use $http inside a service for example.

My favorite translation/i18n module is angular-translate. I've shared here why.

Here is an example of how to use the angular-translate service inside a controller (use the same way inside a service).

View more solutions