Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS: Dynamic locale

I'm using Angular Dynamic locale and Angular-Translate for internationalization and localization (i18n). And works well.

I like the idea of angular-translate that is possible to change the language without refresh the page.

  • Is possible to do the same with Angular Dynamic locale? If is possible, how can I get this?

All the words from angular-translate changed automatically, but not the words from angular_locale (datapicker, etc), that the users need refreshing the page.

Thanks!

like image 217
Aral Roca Avatar asked Jul 29 '15 16:07

Aral Roca


1 Answers

Just in case you don't have absolute necessity to use Angular Dynamic locale,you can create your own LocaleFactory like this:

 factory('LocaleFactory', function ( $locale, $translate) {
    var locales = {
        nl: {
            "DATETIME_FORMATS": {
                "AMPMS"     : [
                    "AM",
                    "PM"
                ],
                "DAY"       : [
                    "zondag",
                    "maandag",
                    "dinsdag",
                    "woensdag",
                    "donderdag",
                    "vrijdag",
                    "zaterdag"
                ],
                "MONTH"     : [
                    "januari",
                    "februari",
                    "maart",
                    "april",
                    "mei",
                    "juni",
                    "juli",
                    "augustus",
                    "september",
                    "oktober",
                    "november",
                    "december"
                ],
                "SHORTDAY"  : [
                    "zo",
                    "ma",
                    "di",
                    "wo",
                    "do",
                    "vr",
                    "za"
                ],
                "SHORTMONTH": [
                    "jan.",
                    "feb.",
                    "mrt.",
                    "apr.",
                    "mei",
                    "jun.",
                    "jul.",
                    "aug.",
                    "sep.",
                    "okt.",
                    "nov.",
                    "dec."
                ],

                "fullDate"  : "EEEE d MMMM y",
                "longDate"  : "d MMMM y",
                "medium"    : "d MMM y HH:mm:ss",
                "mediumDate": "d MMM y",
                "mediumTime": "HH:mm:ss",
                "short"     : "dd-MM-yyyy HH:mm",
                "shortDate" : "dd-MM-yyyy",
                "shortTime" : "HH:mm"
            },
            "NUMBER_FORMATS"  : {
                "CURRENCY_SYM": "\u20ac",
                "DECIMAL_SEP" : ",",
                "GROUP_SEP"   : ".",
                "PATTERNS"    : [
                    {
                        "gSize"  : 3,
                        "lgSize" : 3,
                        "macFrac": 0,
                        "maxFrac": 3,
                        "minFrac": 0,
                        "minInt" : 1,
                        "negPre" : "-",
                        "negSuf" : "",
                        "posPre" : "",
                        "posSuf" : ""
                    },
                    {
                        "gSize"  : 3,
                        "lgSize" : 3,
                        "macFrac": 0,
                        "maxFrac": 2,
                        "minFrac": 2,
                        "minInt" : 1,
                        "negPre" : "\u00a4\u00a0",
                        "negSuf" : "-",
                        "posPre" : "\u00a4\u00a0",
                        "posSuf" : ""
                    }
                ]
            }
        }
    };

    return {
        setLocale: function (key) {
            $translate.use(key);
            angular.copy(locales[key], $locale);
        }
    };
});

Similarly you can add other locals as well

Call setLocale to change the locale

run(function (LocaleFactory) {
    LocaleFactory.setLocale('nl');
});

When ever your locale get changed you can call setLocale by providing the locale key as an argument. It will change your locale instantly

like image 97
Brijesh pant Avatar answered Sep 25 '22 00:09

Brijesh pant