I18N / Angular JS / Javascript Text

Question

I am developing a Phonegap application 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

Both of them are very "simliar": There are placeholder (expressions) to be translated.

So my question is: how to translate clear text, for example. warning notification that is inside the Angular service (and not in the expression / placeholder)?

Answer 1

angular-translate allows you to use $ translate service directly. Below is a 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 "clear" text is always a specific translation. Therefore, if you want to transfer i18n to your notifications, your notifications should use a translation identifier that can be translated using the translation service (if you use angular-translate for example.).

In particular, when using an angular translator, you can simply transfer your specific text to the translation component (service, filter directive). If your translation table does not have a translation identifier that looks like a passed value (in your case, a specific text), it will return this string, so this will also work.

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

If you have further questions about angular-translate, please let me know!

Answer 3

You can see the jlg-i18n github project: https://github.com/jlguenego/jlg-i18n

Added value:

1) There is no UPPERCASE_TAG, as in other solutions. Instead, you directly overlay text in the original language. Therefore, if a translation is not found, the original line is printed, and the degradation is not complete. An example of an angular expression with an i18n filter:

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

2) There is a functional interpolation / pluralization function.

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

exit:

 You have 4 messages and no error. 

Answer 4

To translate within a service, just add the translation service to the service, for example, how you use $ http inside the service, for example.

My favorite / i 18n translation module is angular translation. I shared here why.

The following is an example on how to use the angular -translate service inside the controller (use the same path inside the service).

Answer 5

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

Cheers, Tim Sweet

Answer 6

I know that @Kevin already answered ur, but you can also do something similar 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 in the scope variables you want to show.

and I think that with this approach, you do not need to transfer your every filter (if there are more than one) to the controller and achieve the same result.