Annotating strings in Javascript code

[t00f]

Hello,

Thanks a lot for this useful work ! I always enjoyed the use of gettext, and using it with angular is awesome.

According to the documentation, we can use gettext factory to annotate strings in Javascript code

angular.module("myApp").controller("helloController", function (gettext) {
    var myString = gettext("Hello");
    console.log(myString);
});

My current string Hello is well find after grunt extraction, translated with Poedit and compiled to be added to the translation.js file. Unfortunately, writing those lines won't actually translate the string Hello. The log message keeps to say "Hello" instead of "Hallo"

I checked the source code and I might found the problem. The factory called gettext simply returns the string. A comment explains that it enables grunt to extract strings without translations

angular.module('gettext').factory('gettext', function () {
    /*
     * Does nothing, simply returns the input string.
     * 
     * This function serves as a marker for `grunt-angular-gettext` to know that
     * this string should be extracted for translations.
     */
    return function (str) {
        return str;
    };
});

I tried to use the gettextCatalog to find the translation and its seems to work fine.

angular.module('gettext').factory('gettext', function (gettextCatalog) {
  return function (str) {
    return gettextCatalog.getString(str);
  };
});

Is there a problem in Javascript annotation ? Does my changes in your gettext factory a nice solution to you ?

[rubenv]

You're not the first person to get hit by this, I should probably clarify the documentation for this one.

Not returning a translated string is intentional: You want to pass the original string to the view and translate it there. That way it can keep responding to language changes.

If you really want the translated string in your controller, use gettextCatalog.getString(gettext("My string")). Yup, that looks ugly, as a reminder that it's probably the wrong thing to do.

Edit (2014/07/09): Nowadays you can just use gettextCatalog.getString("My string")

Here's what your probably want to be doing:

angular.module("myApp").controller("helloController", function ($scope, gettext) {
    $scope.myString = gettext("Hello");
});

And then in your view:

{{myString|translate}}

[t00f]

Thanks a lot for your quick reply !
I didn't noticed that gettext() was actually only there to anotate - even if it's clearly written in the documentation...

As I don't really need the translated string in my controller, I would use your second option which is wayyyy better for my eyes ;)

If you want to improve your documentation, just add the 2 last sentence. It is clear enough to me now !

Thanks again.

[rubenv]

Also, if you don't need the string at all in your controller, just put it directly into the view:

{{"Hello"|translate}}

Or even nicer:

<h1 translate>Hello</h1>

Enjoy!

[tkrotoff]

@rubenv

You're not the first person to get hit by this

I too got confused and had to check the source code.

gettextCatalog.getString(gettext("My string")) [...] probably the wrong thing to do.

Then how do you treat this case? :

app.service('HelloHttpService', function($http, Alert) {

  this.query = function() {
    $http.get('hello.json').then(
      function(response) {
        Alert.success('Everything OK'); <====
      },
      function(response) {
        Alert.error('Something went wrong: ' + error + ', please reload'); <====
      }
    );
  };

});

A function to translate text would be nice here:

tr('Something went wrong: {{error}}, please reload', {error: error});

Note: Alert being a service that displays alert messages/notifications (something like this)

[tsi]

@tkrotoff did you find a solution for this?