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

1)

2)

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

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

• javascript
• angularjs
• internationalization
• cordova

• Also take a look on official i18n angular file =) : github.com/angular/bower-angular-i18n – Deividi Cavarzan Commented Aug 2, 2013 at 17:53

6 Answers 6

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

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!

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.

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

You can check out ui-i18n https://github.com/angular-ui/ui-utils/pull/173, the performance is better than angular-translate and is lighter weight with a simpler syntax imo.

Cheers, Tim Sweet

I know @Kevin has already answered ur question, but you can also do something like this using '$filter'.

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', '$filter', function ($scope, $filter) {

 $scope.headline = $filter('translate')("HEADLINE");
 $scope.paragraph = $filter('translate')("PARAGRAPH");
 $scope.namespaced_paragraph = $filter('translate')("NAMESPACE.PARAGRAPH");
 }]);

and pass the scope variables to the alert you want to show.

and i think with this approach you don't have to pass your each and every filter(if at all more than one) to the controller and achieve the same result.