AngularJS e internacionalização de aplicativos da web

A internacionalização de aplicativos da web é onipresente e mostro como você pode fazer isso em seu aplicativo com AngularJS.

Por exemplo, temos alguns *.jsonarquivos com nossas traduções, mais ou menos assim en_US.json:

{
   "en_US" : {
       "HOME": "home",
       "GREETINGS": "Hello, how are you?"
       ....
    }
}

Em primeiro lugar, devemos carregar nosso en_US.jsonarquivo e arquivos com outras traduções e salvar seu conteúdo na variável. Vou carregá-lo na parte de inicialização do aplicativo da web.

app.js:

var Lang = 
    (function() {var json = null;
        $.ajax({
            'async': false,
            'url': "/en_US.json",
            success: function (data) {
                json = JSON.parse(data);
            }
        });
        return json;
    })();

Agora podemos usar Langvariáveis ​​em qualquer lugar. Vamos criar um AngularJSfiltro. Vamos transformar o conteúdo na tradução necessária.

MyApplication.filter('translate', function (){
    return function(input){
        //
        // Check necessary locale locale
        //

       // .....

       //
       // Change locale
       //
       for (var prop in Lang){
           if (prop == input)
               // return translation
               return Lang[prop];
            }
    }
});

Agora podemos traduzir facilmente qualquer conteúdo em nosso aplicativo. Use o translatefiltro em seus modelos como:

<div>{{ 'GREETINGS' | translate }}
    <p>{{ 'HOME' | translate }}</p>
</div>

@ 0xAX