rubenv / angular-gettext

Gettext support for Angular.js

Hi, I'm Ruben Vermeersch.

I'm a product/startup builder from Belgium. Chief mechanic at Garage 61. Passions / specialities: Motorsports, DevOps, Kubernetes, Go. I offer a variety of services to bring DevOps knowledge into your organization: training, architectural advice and hands-on implementation work. My main focus is always on transferring this knowledge to your team. Learn more More about me: https://rocketeer.be/ | https://garage61.net

angular-gettext's Issues

Version number in bower.json

Please include a version number in the bower.json file as its absence makes most of my compilation tools fail...

Something like
"version": "0.1.2"

for each released tag.

Best regards,

Is priority 900 in directive necessary?

I am having some problems with the 900 priority here: https://github.com/rubenv/angular-gettext/blob/master/src/directive.js#L4 and my other directives so I'm wondering if it is necessary. Everything seems to work fine if I remove it.

Automated translations

In case anyone needs automated translations of their PO files like we did I wrote a quick utility to use http://www.freetranslation.com/ API. Will extend for other API's as I have more time. Need to restructure some of the code for that.

While I wouldn't use this for production, it works great if you need to check things like RTL languages and such.

Project link: https://github.com/jdarling/potrans

Working with html entities - how to?

When I have the following html element

% XYZ

The "translate" directive works with "% XYZ" as input value. But the translation has the key "% XYZ"

How can I handle this?

base language handling

I'm curious about base language handling:

e.g. when I define my text in the templates: it is assumed that the language is english. so why do I get the "[MISSING]" info also for english (when gettextCatalog.debug = true and gettextCatalog.currentLanguage='en')?

From my point of view, it would be nice to specify a base language explicitly. (e.g. gettextCatalog.baseLanguage='de'). The "[MISSING] info should only be displayed when the currentLanguage is NOT the baseLanguage.

BTW, is it practically/advisable to specify the "base" text in german??? My first tests were promisingly (also with using of umlauts)....

Shorter directive names

Just saying. If i have to lace my entier app with these directives, would be nice to make em concise. Like i18n or trl8 (heh)

May lead to duplicated elements when combining with ng-if.

jQuery in bower.json but not used

I know that jQuery was kept in the bower.json file in case someone starts using it, but the fact is it isn't referenced anywhere in any way shape or form in GetText. Can it be removed from the bower.json file please?

This is causing a problem with me at work as we have a strict "No jQuery" policy and I've had to code our Gruntfile to ignore the improperly installed jquery bower_components folder.

I'd understand keeping it if you used it some place, but I've looked, there is nothing jquery in the source.

gettextCatalog - providing function for getting interpolated text?

Hi, I would need a function to get interpolated text from javascript.

Could you imagine a litte "enhanced" getString function in gettextCatalog:

e.g.

getString: function (string, dataObject) {
          var text = this.getStringForm(string, 0) || prefixDebug(string);
          if(angular.isObject(dataObject)) {
              return $interpolate(text)(dataObject);
          } else {
              return text;
          }
      }

and usage would be:

$log.info(gettextCatalog.getString("Hello I'm {{name}}",{name:'Martin'}));

gettext() always return the untranslated string

Shouldn't this https://github.com/rubenv/angular-gettext/blob/master/dist/angular-gettext.js#L7 be something like https://github.com/rubenv/angular-gettext/blob/master/dist/angular-gettext.js#L105

Because when I call

gettext("English version")

I always get back English version instead of Translated version. The translation is definitely available.

gettextCatalog debug mode should still display missing translations if locale is 'en'

https://github.com/rubenv/angular-gettext/blob/master/src/catalog.js#L5

Since debugging would only be turned on in circumstances where you want to see strings that aren't marked for translation, you shouldn't have to also switch locales to see missing translated strings.

I would expect debug mode to show strings that were not marked for translation regardless of the locale.

Add compilation to translated strings

Translated strings should also be compiled by Angular, similar to the way they are translated

gettext() not returning any translation

Maybe I'm missing something, but shouldn't the gettext() factory method inside angular-gettext.js return a real translation instead of just being a dummy placeholder for the extraction script?

If you change it to something like:

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

Then the example on your site (http://angular-gettext.rocketeer.be/dev-guide/annotate-js/) would actually return a translation:

var myString = gettext("Hello");

Cannot run unit tests

Running unit tests results in some errors:

Running "karma:unit:run" (karma) task
[2014-02-24 12:08:44.192] [DEBUG] config - Loading config /Users/oyiptong/Projects/github/angular-gettext/test/configs/unit.conf.coffee
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: angular
        at /Users/oyiptong/Projects/github/angular-gettext/dist/angular-gettext.js:1
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/catalog.js:8
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/directive.js:10
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/filter.js:10
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/gettext.js:8
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/loading.js:9
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/plurals.js:8
PhantomJS 1.9.7 (Mac OS X): Executed 0 of 0 ERROR (0.108 secs / 0 secs)

Running "karma:unit_nojquery:run" (karma) task
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: angular
        at /Users/oyiptong/Projects/github/angular-gettext/dist/angular-gettext.js:1
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/catalog.js:8
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/directive.js:10
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/filter.js:10
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/gettext.js:8
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/loading.js:9
PhantomJS 1.9.7 (Mac OS X) ERROR
        ReferenceError: Can't find variable: module
        at /Users/oyiptong/Projects/github/angular-gettext/test/unit/plurals.js:8
PhantomJS 1.9.7 (Mac OS X): Executed 0 of 0 ERROR (0.106 secs / 0 secs)

Why you are using PatternConsulting/bower-angular as a dependency?

And not using angular from https://github.com/angular/bower-angular?

Support Jed JSON format

Jed's JSON format [1] is fairly common. It would be nice if gettextCatalog.setStrings supported it. That would make it easier to interoperate with tools that can deal in Jed like po2json. Jed JSON also supports multiple domains and includes metadata about the translations (plural_forms and lang) that is otherwise specified out-of-band with angular-gettext.

[1] http://slexaxton.github.io/Jed/

Insert Project-Id-Version header in generated .pot file

Crowdin.net and other services expect a Project-Id-Version header in the .pot file. this is currently not being inserted in the generated file.

I could add it myself in the catalog.headers part of extract.js, however it would be a nice simple addition if it could be added on project basis. :-)

There doesn't have to be a value in the header for it to work with crowdin.net (i'm not sure regarding other online services/editors).

Simply updating it to:

    catalog.headers = {
        'Content-Type': 'text/plain; charset=UTF-8',
        'Content-Transfer-Encoding': '8bit'
        'Project-Id-Version: \n'
    };

should work, and make it easier not having to add it manually everytime :-)

In crowdin.net's case not having the header will cause their build system to output a .po file without correct language header, which then will fail the compile process.

ngIf make the translation crash

the error:

Error: You should add a ng-if attribute whenever you add a translate attribute.

my html:

        <h1 ng-if="dayTimes.isToday"     class="today"       ng-class="{ 'weekend': dayTimes.isWeekend }" translate>Today</h1>

it seems that the condition is failing because ngIf is exists:

72: assert(!attrs.ngIf, 'ng-if', 'translate');

66: if (!condition) {

which turn to:

if(!(!attrs.ngIf)) {

Pluralize Strings (Sometimes)

I have the following class in my C# code that contains the messages to be translated.

public static class AuthMessages
{
    public static string InvalidUserOrPassword = "Invalid User ID or password";
    public static string UserIsLocked = "User is locked";
    public static string PasswordExpired = "Password expired";
    public static string PasswordMustBeChanded = "Password must be changed";
    public static string ExpirationWarning = "Your password will expire in {0} days";
}

I have created a language service using the factory recipe and it works wonderfully for me.

angular.module('Sample', ['gettext'],
        function() {  })
    .factory('LanguageService', ['gettextCatalog', function(gettextCatalog) {

        var langService = {};

        langService.changeCurrentLanguage = function (languageCode) {
            gettextCatalog.currentLanguage = languageCode;
            gettextCatalog.debug = true;
        };

        langService.getTranslatedString = function (str) {
            return gettextCatalog.getString(str);
        };

        return langService;
    }]);

In the actual controller I utilize the service by injecting it and adding the following method to the $scope

$scope.translate = function(str) {
            return LanguageService.getTranslatedString(str);
        };

This works just fine for the first four strings. The last one however I would like to read
Your password will expire in one day for the singular and
Your password will expire in 2 days for the plural

Is the a way to do this without writing a lot of JavaScript string parsing code to determine that this particular string needs to be pluralized?

Humbly Yours

Annotating plural strings in JS source

Hi,
In regular markup the translate-n and translate-plural attributes can be used to mark strings for plural translations.

Is there an equivalent in JS based strings?

Thanks.

Splitting up compiled file based on language

After reading, http://angular-gettext.rocketeer.be/dev-guide/compile/ , I have the impression that it generates one file with all translations. Is it possible to split the translation for each language so that I may only load what is necessary (by whatever in the user profile). I wonder otherwise how it affect the performance of a large application.

Thanks for the library and your effort.

Poedit and plurals settings

I have installed the latest Poedit for mac.
Version 1.6.3 (2449)

the instruction at http://angular-gettext.rocketeer.be/dev-guide/translate/ may not be accurate anymore.

1. it doesn't have New Catalog menu

but, I guess, New from PO/POT may use instead. It doesn't give the settings dialog.

1. you can access the transltion properties through , Catalog -> Properties
   

but, doesn't allow to save once take out the trailing semicolon.

is it ok to leave the semicolon or what can I do?

Get rid of jQuery dependency easily.

Hi, I really like your project, specially extracting and compiling language-specific keys from sources, but one thing I hate - jquery dependency.
You are using jQuery in just one case:

in angular-gettext.js file at line 73 :
$.trim(clone.html())

You can easily replace that with native (and probably much faster) 👍 clone.html().trim()
and remove jquery check on the top.

It would be lovely to see your next version without nasty jquery dependency.

Nodes with children are not translated in IE8

Hi, thanks for an excellent library. I'd like to report an issue I found with IE8, tested against the latest stable versions of angular (1.2.15) and angular-gettext.

Normally sometimes you put the translate directive on an element which has child elements, and all of it would be translated in one chunk. For example:

<p translate><b>Note:</b> keep out of reach of children</p>

Both gettext_extract and the localization engine would handle this without a hitch in modern browsers. Under IE8, it refuses to find the correct translation. If debug mode is turn on, a [MISSING] tag is prepended to the output.

So far, I have taken a wild guess and sneaked into the po file and changed the embedded tags to capital form, i.e.

msgid "<B>Note:</B> keep out of reach of children"

and this seems to work in simple phrases but not in complex cases where there are more tags. But more importantly, this breaks the translation that otherwise works in all other browsers, so it's not an acceptable fix.

Do you have an idea of what could have caused the issue, and how hard it would be to workaround?

About replacing the HTML element on the translate directive

Hi!

Im hitting the following problem:

http://plnkr.co/edit/d3pkzDwAZ4aqfxxXpGEV?p=preview

This shows some Bootstrap nav tabs, on which a Controller is doing .preventDefault(), so when you click on them the correct nav panel shows, using bootstrap markup.

The problem is that when i use the translation directive on it, the element seem to gets replaced with the cloned one, after the controller executes the .preventDefault method, so its like the method has never been executed at all, making tabs not work.

I think its something near here: https://github.com/rubenv/angular-gettext/blob/master/src/directive.js#L24

How could one work this out?

Can the element be modified instead of replaced with the cloned one?
Or maybe there is another aproach?

Im probably the only one using the translation on boostrap nav tabs, but i think the problem can manifest in other use cases too!

Thanks in advance!!

Integration for https://poeditor.com

https://poeditor.com offers an API where you can up-/download your *pot files and the translations.

Wouldn't it be cool to have a possibility to integrate this upload with your nggettext_extract commands of your Gruntfile?
Has anyone thought about this?

Thanks!

IE8 > Some strings are not translated / noted as Missing

This is caused by this commit in Angular:
angular/angular.js@37e8b12

Basically, Angular adds a comment which causes the translation not to match.

Anything similar to /// ?

In GetText you can use /// to decorate and annotate a translation block to provide instruction to translators. Does this directive supply any way of doing this?

ng-switch-when causes translations to not be replaced

I've run into an issue that causes translation strings to not be replaced properly. I've got the following markup:

<a href="" ng-switch="predicate">
    <span translate>Sort By</span>
    <strong aria-hidden="true" ng-switch-when="-dateAdded" translate>Date</strong>
    <strong aria-hidden="true" ng-switch-when="name" translate>Title</strong>
</a>

I've enabled debug mode, and while the other translations on the page have the appropriate '[MISSING]: ' text prepended, the <strong> terms above do not.

I played around a little bit and I was able to get the translation to be inserted by setting the priority on the translate directive to 499, which is just below the priority of the ng-switch-when directive.

How can I translate select options?

Hello, I've a select binding to ng-options, How can I translate the item.Name option text?

I think angular-gettext is great!

Annotating strings in Javascript code

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 ?

How can I translate nested strings?

Hi;

Let's say I have

    <h1 translate>New Venue
        <small translate>please enter new venue information</small>
    </h1>

It is extracted as:

#: public/modules/venues/views/create.html
msgid ""
"New Venue"
"            <small translate=\"\">please enter new venue information</small>"
msgstr ""

How can I translate them seperately?

Clarify that gettext() only serves for extraction

This comes up again and again:

• #19
• 33557ea#commitcomment-4616121

Cant translate some string

This is really weird.. The grunt is exporting and converting this sentence fine.. but the angular just ignore the translation..

<p class="disclaimer" translate>By clicking login, you accept our <a hm-tap="openTOS()">privacy policy & terms of use</a>.</p>

Clarification about performance

I stumbled across an issue in a competitive lib (angular-translate) which addresses performance... (angular-translate/angular-translate#169)

I assume that "re-evaluation" is also a performance topic with angular-gettext. (I ask because of usage in a mobile app where performance is critical...)

Can you give some thoughts about performance....

From your point of view, could you imagine a way to evaluate a simple string only once????

Translate inside ng-if can cause duplicates with Angular 1.2

Handling grammatical gender with Angular-Gettext

Hi,

We are starting a big project and thinking seriously about using Angular-Gettext. Our only concern is about handling gender. Is there a simple-proper-elegant way to do it ?

Thank you very much!

Select with default option disappears

I have problem with translation of default element in . Lets asume the following code: <select ng-model="printer" ng-options="printer.name as printer.name for (printerName, printer) in printers"> <option value="" translate>All</option> </select> Element with empty value is not beeing displayed on dropdown menu. After removing translate attribute element is shown. My .po file does contain translation for 'All' and it is loaded into module (I use this phrase in other places and it is translated).

jQuery only for trim?

I have make a little jsFiddle to test a none jQuery trim function:
http://jsfiddle.net/Nanobyte/m9DxP/

I think jQuery is to overpowered for this simple trim job.

I like what you did

Hey @rubenv !

angular-gettext looks really interesting! Also you documented everything very well which is a BIG plus man!

I created angular-translate, you probably heard of it. Maybe you find some time someday to have a look at it. I'm sure, there are things in angular-gettext which could also be useful in angular-translate! :)

Or maybe you just have ideas and feedback on making angular-translate better.

Cheers

/pp

How do you translate a text in a HTML tag attribute?

How can you translate something like this:

      <a data-title="my tooltip text that should be translated" translate>My Action</a>

Bug with multiline strings

I have the following HTML:

<div translate>
    hello
    bye
</div>

After extracting, I get the following:

#: c:\GIT\tugo-web-client\app\views\team-member.html msgid "" "hello " " bye" msgstr ""

Since msgid is empty, it also doesn't get recognized as a string that should be translated in Poedit.

The only workaround is to put all the content in a single string, however, this is quite annoying in some cases.

Error: You should add a ng-if attribute whenever you add a translate attribute. ???

I don't see in the documentation or anywhere here on GH about the ng-if for attributes. On the http://angular-gettext.rocketeer.be/dev-guide/annotate/ page under Attributes it doesn't talk about this either.

Why does the attribute require an ng-if and what should be in it?

Looking at the code (src/directive.js@31) once I fix the ng-if its going to fail on an ng-switch-when (src/directive.js@32).

Need to automatically test without jQuery loaded

{{'string'|translate}} markup breaks if there are html tags inside of it

This is not a huge problem, I just wanted to let you know.
I must confess I didn't had the time to check what's causing this, and I wanted to report it before I forget.

Support for english translation (po) file

When I have an po file for english (e.g en.po) the result of the compilation process leads to a "eundefined" key in the tranlations javascript...

Also I would like to define the base language (when possible - other then en) ....

Error: Invalid Argument in IE11

When using interpolation like:

<h1 translate>Hello {{ name }}</h1>

In IE11 I get the following error:

Error: Invalid Argument
 at interpolateFnWatchAction (http://test.com:8080/bower_components/angular/angular.js:6833:15)
   at Scope.prototype.$digest (http://test.com:8080/bower_components/angular/angular.js:12332:23)
   at Scope.prototype.$apply (http://test.com:8080/bower_components/angular/angular.js:12597:13)
   at Anonymous function (http://test.com:8080/bower_components/angular/angular.js:14104:25)
   at completeOutstandingRequest (http://test.com:8080/bower_components/angular/angular.js:4297:7)
   at Anonymous function (http://test.com:8080/bower_components/angular/angular.js:4598:7) undefined

The error is shown only If there are variables in the translated text.
Any ideas what is causing it?

Dealing with homonyms

In GNU gettext there is an option to use contexts to deal with homonyms.

How do I do that with angular-gettext?

Allow annotation of the config section of the Angular app

gettext can't be injected into a angular module .config section, when typically people define routes and titles for those routes them.

I worked around this limitation re-defining the gettext function inline within each .config section of my modules that had translatable strings, like this:

function gettext(s) { return s; }

The extractor was able to pick up the strings then.

Don't know if there's a better solution. Maybe "gettext" should be a global function after all instead of a injectable one.

npm package is broken

The package from the npm repo specifies main: index.js, but it doesn't have such a file. It only has the dist directory. The bower package works because its main is specified as dist/angular-gettext.js.