AngularJS-Localization

Selector localization for AngularJS. No reload after changing language.

The syntax for .lang files is exactly like json. Linebreaks for the keys and values are allowed. Usefull for pre elements and text. You can also set attribute and rootscope values. The initial localization is the navigator language. You can simply change the current language with a function or route parameters. The selected langauge will be automatically saved and restored. Additionally the lang tag for the HTML element will be updated and the hreflang meta tag will be included for all available languages. JQuery and ngCookies required.

INSTALL/SETUP

Run/Config

app.config(["localizeProvider", function (localizeProvider) {
    //if navigator language can not be detected
    localizeProvider.setDefaultLanguage("en-EN");

    localizeProvider.addLanguage("en-EN");
    localizeProvider.addLanguage("de-DE");

    //language files that not related to any route
    localizeProvider.addDefaultUrl("en-EN", "./Content/Text/index-en-EN.lang");
    localizeProvider.addDefaultUrl("de-DE", "./Content/Text/index-de-DE.lang");
}]);

app.run(["localize", function(localize) {
        localize.initialize();
}]);

Router

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when("/Start",
        {
            templateUrl: "./Views/start.html",
            controller: "StartCtrl",
            localizeUrl: {
                "en-EN": "./Content/Text/start-en-EN.lang",
                "de-DE": "./Content/Text/start-de-DE.lang"
        }
        }).when("/About",
        {
            templateUrl: "./Views/about.html",
            controller: "AboutCtrl",
            localizeUrl: {
                "en-EN": "./Content/Text/about-en-EN.lang",
                "de-DE": "./Content/Text/about-de-DE.lang"
        }
        }).
        otherwise(
        {
            redirectTo: "/Start"
        });
}]);

index-en-EN.lang

"$index.metaTitle" : "SPA Meta Title EN (inside rootscope)",
"$index.metaDescription" : "SPA Meta Description EN (inside rootscope)",
".lang-label" : "Language: ",
"#lang-de" : "DE",
"#lang-en" : "EN",
"input[text] /[placeholder/]" : "This is the placeholder attribute text.",
".menu > a[href='/Start']" : "Start",
".menu > a[href='/About']" : "About",
".text" : "Here is some example text.
You can use multiline as well."