Play Framework 2, AngularJS and internationalization

Question

I am currently implementing AngularJS in a Play Framework 2 application, and this is good, but I have some issues with internationalization. I have message files ( messages.en , messages.fr , etc.) that I usually used without Angular in my scala templates.

Now I'm using the Angular partials ... So, I found a plugin ( jsMessages ) for the Play platform to use the message file in the javascript file, and finally found a way to use it with requireJs and all that.

So now I pass the Messages function (which allows you to receive translated messages) in the $scope variable. That way, I can get a message with {{Messages("myMessage")}} , but it does not work everywhere.

For example, some of my <input> have a default value (for example, a placeholder with a translated message). But Angular does not like and does not evaluate expression.

So I'm wondering what should I do:

• Do I have to use the Play server for page templates with strings already translated to the server that will be returned to Angular in order to use them as "partial"? (mix scala @ directives and Angular ng-* directives in the same templates)

• or should I use only javascript to translate strings and in some cases pass an additional variable to the scope, only for inputs, textarea and all these components, where {{}} cannot be used directly?

(I personally prefer the first option)

Answer 1

I think this is a good solution for using the Play template system. This way you can also use Scala if you need to put some logic in your templates or also access your Play configuration file.

But if you want to be completely separate from the Liferay framework, jsMessage might be a good solution. To make it work, try placing the jsMessage function in the $ root area so that it is accessible everywhere.

To do this, add the jsMessage Messages function to the root area when starting the main application module (ng-app directive).

 angular.module('app').run(function ($rootScope) { //Put the jsMessage function in the root scope in order to be able to call //{{ Messages('my.messages') }} from the templates. $rootScope.Messages = window.Messages; });