Fai parlare la tua app AngularJS/ionic/cordova in tutte le lingue che vuoi senza plugin esterni in 1 minuto!

Ci ritroviamo spesso a dover usare plugin di localizzazione, tra i più comuni “i18n” che sicuramente offre un sacco di personalizzazioni in campo di testo, data, valute e formattazioni minori.

Spesso però basterebbe avere un rapido sistema che supporti semplici stringe localizzate, come nel caso dell’ultima applicazione che ho creato: EveryDay (AppStore e Play Store) dove poche righe di testo non valevano un plugin complesso e pesante (per le poche linee richieste) come i18n perciò perché non creare da me un sistema rapido ed intuitivo?

Cosa serve:

  • AngularJS (se vuoi una versione javascript chiedimela nei commenti e te la creo, promesso)

Fine.


localization.js


Crea un file ‘localization.js‘ dove preferisci (in ionic/cordova c’è una cartella /js dove metteremo il nostro file in questo esempio).

Importa il file dentro la testata di index.html

<script src="js/localization.js"></script>

Qui creiamo un sistema molto semplice ed intuitivo di variabili divise per lingua:

var lang = {};
//da qui mettiamo tutte le lingue con le relative chiavi!
lang.it = {
    "titolo" : "Grande Articolo!",
    "copyright" : "Tutti i diritti riservati"
};
lang.en = {
    "titolo" : "Cool Post!",
    "copyright" : "All rights reserved"
};

Come si vede creiamo una variabile lang a cui aggiungiamo le varie lingue ( in questo caso it (italiano) e en (english) ) settando “titolo” e “copyright”.

Ora va trovata la lingua del browser (o telefono in caso di APP) dell’utente e prendere la traduzione che ci serve.
Alla fine del file appena modificato aggiungi queste due righe:

var lingua = navigator.language || navigator.userLanguage;
lingua = lingua.substr(0, 2);

Che succede qui? Prendi le prime due lettere della lingua del dispositivo dell’utente (quelle che userai per scegliere tra lang.it e lang.en per intenderci).

Ora. Il grosso è fatto.


controller.js (o il file che usi come controller)


Nel file dove hai il tuo controller metteremo il codice che serve per scegliere la lingua in base a quella del dispositivo dell’utente (le due righe scritte sopra):

//LINGUA PREDEFINITA
if(lang[lingua] === undefined){
    lingua = "it";
}
$rootScope.lang = lang[lingua];

Così facendo abbiamo una lingua predefinita (se un francese dovesse visionare la pagina e non ci fosse una traduzione francese vedrebbe, in questo caso, quella “it”aliana.

Non dimenticare di aggiungere il $rootScope nella funzione .controller o ti darà errore (sicuro troverai lo $scope e andrà messo li accanto, separati da una virgola)!

Ultimo passo!


I file .html


Inizio pagina, servirà un titolo, giusto? Niente di più facile! (e magari una dicitura per il copyright):

<h1>{{lang.titolo}}</h1>
<div>{{lang.copyright}}</div>

E la magia prende vita.
Ora basterà popolare il file localization.js con tutte le frasi necessarie! Ricorda però: per ogni lingua servono le stesse traduzioni! Se ne manca una darà errore (e non verrà mostrato nulla).

Come sempre se hai domande non esitare a porle. Il procedimento spiegato non è complesso, bisogna solo capire dove vanno le cose ma assicuro che va come deve ed è molto versatile, oltre che molto intuitivo.

Buon Coding!

Annunci

, , , , , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: