AngularJS: i18n and pluralization

By glancing the code I can see it's a set of simple pluralization rules. Every locale has this constant. So no, it's not a bug.

Here is how I am doing my i18n work, it seems to be working great! It is based off a set of localized resource files that get initialized at runtime. At the bottom is how I handle pluralization using this approach.

I18n module to hold string id map and parameter insertion

.factory('I18n', ['$http', 'User', function($http, User) {
    // Resource File
    var LANG_FILE;

    // Fetch Resource File
    function init() {
        return $http.get('resources/locales/' + User.locale + '.json')
            .then(function(response) {
                LANG_FILE = response.data;
            });
    }

    function lang(stringId, params) {
        var string = LANG_FILE[stringId] || stringId;

        if (params && params.length) {
            for (var i = 0; i < params.length; i++) {
                string = string.replace('%' + (i + 1), params[i]);
            }
        }

        return string;
    }

    return {
        init: init,
        lang: lang
    };

}]);

This can be initialized using a .run block

.run(['I18n', function(I18n) {
    I18n.init();
}]);

And used anywhere to translate a string like this

.controller(['$scope', 'I18n', function($scope, I18n) {
    $scope.title = I18n.lang(some_string_id);
}]);

Custom i18n DIRECTIVE to handle one time translations

.directive('i18n', ['I18n', function(I18n) {
    return {
        restrict: 'A',
        scope: {},
        link: function(scope, $el, attrs) {
            $el[0].innerHTML = I18n.lang(attrs.i18n);
        }
    };
}]);

Which can be used like this.

<div i18n="some_string_id"></div>

Custom PLURALIZE directive that matches string ids from your resource file with the count as the parameter.

.directive('pluralize', ['I18n', function(I18n) {
    return {
        restrict: 'A',
        scope: {
            count: '='
        },
        link: function($scope, $el, attrs) {
            var when  = JSON.parse(attrs.when)
              , param = [$scope.count];
            if (when[$scope.count]) {
                $el[0].innerHTML = I18n.lang(when[$scope.count], param);
            } else {
                $el[0].innerHTML = I18n.lang(when['other'], param);
            }
        }
    };
}]);

And can be used like this.

<div pluralize count="{{obj.count}}" when="{1:'single_item','other': 'multiple_item'}"></div>   

The String Resource file would be located at resources/locales/en-US.json, and would look something like this.

{
    some_string_id: 'This is in English',
    single_item: '%1 item',
    multiple_item: '%1 items'
}

The other locales would have the same string ids, with different translated texts.