2014-07-09 4 views
6

Sto usando l20n.js per aggiungere localizzazione a un'app Angular.js. Ecco la mia struttura del progetto:Come posso indicare quale lingua deve essere visualizzata nel browser usando l20n.js?

/index.html

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <script src="jquery-1.11.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> 
    <script src="trackingController.js"></script> 
    <script src="l20n.js"></script> 
    <link rel="localization" href="locales/manifest.json"> 
</head> 
<body> 
    <h2 data-l10n-id="name"></h2> 
    <p data-l10n-id="instructions"></p> 
</body> 
</html> 

/locales/manifest.json

{ 
    "locales": [ "en-US", "fr-FR"], 
    "default_locale": "en-US", 
    "resources": [ 
    "{{locale}}/strings.l20n", 
    ] 
} 

/locales/en-US/strings.l20n

<name "Search by name - EN"> 
<instructions "Enter one or more names - EN"> 

/locales/fr-FR/strings.l20n

<name "Search by name - FR"> 
<instructions "Enter one or more names - FR"> 

Come posso scambiare inglese (ad es. il file /locales/en/strings.l20n) per il francese? Rende en-US nonostante indichi lang="fr-FR" in index.html.

risposta

6

Per impostazione predefinita, L20n utilizza le impostazioni della lingua del browser per determinare quale locale mostrare all'utente. Immagino che il tuo browser abbia "en" o "en-US" nell'impostazione della lingua da qualche parte. Puoi visualizzare un'anteprima delle impostazioni aprendo la console sviluppatore (Ctrl + Maiusc + K in Firefox, Ctrl + Maiusc + J in Chrome) e digitando navigator.language o (nelle versioni più recenti di Firefox) navigator.languages.

In Firefox, è possibile modificare le preferenze della lingua andando in about:preferences#content e facendo clic su "Scegli" in "Lingue". In Chrome, c'è un pannello simile nelle Impostazioni, ma in realtà non modifica la proprietà navigator.language, che è un known bug. Dovrai scaricare e installare una versione francese di Chrome se vuoi testarla in questo modo.

Un'alternativa è quella di utilizzare l'API L20n e cambiare in modo esplicito il linguaggio con:

document.l10n.requestLanguages(['fr']); 

Questo è utile se si desidera fornire un pezzo di interfaccia utente per consentire agli utenti di cambiare la lingua dell'applicazione. Ad esempio, potresti avere un menu a discesa con tutte le lingue supportate, che chiama document.l10n.requestLanguages quando viene selezionata una nuova opzione.

+0

non mi rendevo conto che era un'impostazione del browser, ho pensato che dovevo specificare l'impostazione me stesso linguaggio. Grazie! –

+0

Il metodo requestLocales è scomparso dall'oggetto l10n almeno nella v3.0.6. Come si può cambiare il locale in modo esplicito nelle ultime versioni? – Antoine

+0

Sto lavorando su una patch che la riporterà: https://bugzilla.mozilla.org/show_bug.cgi?id=1207120. Scusa per il disturbo! –

3

Utilizzare l'API JavaScript L20n requestLocales()

/index.html

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <script src="jquery-1.11.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> 
    <script src="trackingController.js"></script> 
    <script src="l20n.js"></script> 
    <link rel="localization" href="locales/manifest.json"> 
    <script type="text/javascript"> 
    $('#langSwitch-en').click(function() { 
     document.l10n.requestLocales('en-US'); 
    }); 
    $('#langSwitch-fr').click(function() { 
     document.l10n.requestLocales('fr-FR'); 
    }); 
    </script> 
</head> 
<body> 
<!-- fix the correct language code [-de] for [-fr] --> 
    <a id="langSwitch-en" href="#">en</a>/<a id="langSwitch-fr" href="#">fr</a> 
    <h2 data-l10n-id="name"></h2> 
    <p data-l10n-id="instructions"></p> 
</body> 
</html> 
+0

Grazie per la soluzione. Un piccolo errore di funzioni jQuery. O metti lo script su documento pronto o posiziona lo script alla fine del corpo. Attualmente non funziona così com'è. – Salik