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)?

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

Answer 2

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!