Internazionalizzazione con angularjs

Question

Sto pensando di spostare il mio sito su angularjs, e voglio iniziare molto piccolo, spostando tutte le mie forme di testo in chiaro sul lato server dal django all'angolare (altrimenti ci saranno problemi di sintassi con il '{{}}').

Sembra che il modo migliore per farlo sarà una delle due opzioni:

1. Per avere una chiamata AJAX che restituisce un JSON con tutti i testi del mio sito. I testi saranno archiviati in una variabile che è vincolata ai miei elementi HTML, così angolare aggiornerà tutto.
2. Per memorizzare un file js statico con il dizionario e includerlo nel mio codice HTML e associare il dizionario con angularjs.

Entrambe le opzioni mi consentiranno di passare da una lingua all'altra senza ricaricare la pagina.

Quale è il migliore? In generale, è un buon approccio o esiste un modo più corretto?

Answer 1

Prima di tutto, c'è un modo per cambiare delimitatori di angolari ad altri simboli come risposta qui: Angular JS custom delimiter

L'2. opzione è più facile. Lo includi una sola volta e hai tutte le traduzioni al caricamento della pagina. Nessuna chiamata asincrona, nessuna promessa, semplice e piacevole.

Eppure andrei con il primo. Servizi come $translate renderebbero davvero la vita più semplice seguendo l'opzione 1. In più ha molte opzioni per caricare e memorizzare i dati caricati in LocalStorage e cookie, quindi c'è molto spazio per l'estensione e la personalizzazione. Puoi quindi tradurre i tuoi contenuti con $ translate servizio, direttiva o filtro.

E non dimenticare che l'opzione 2 disabilita tutte le opzioni delle richieste memorizzate nella cache. Su ogni richiesta alla tua pagina iniziale il server deve leggere il file statico e includerlo nel codice html. Con la prima opzione il browser dell'utente può memorizzare .json per tutto il tempo che vuoi.

Answer 2

AngularJS supporta il8n/L10n solo per filtri di valuta, data e numeri. Secondo this book:

(scusate per la fotocamera del cellulare di bassa qualità!)

direi seguire il primo approccio e caricare la traduzione in modo dinamico. Si tratterebbe di un sacco di lavoro, ma non c'è altro modo per aggirare

Answer 3

Dai un'occhiata alla angular-translate :)

Risolve entrambi gli scenari!

Answer 4

Ho provato diverse opzioni, tra cui Angular Translate, ma mi è piaciuto il Angular-gettext il migliore finora.

Una cosa che ha aiutato enormemente è che c'è una demo funzionante per questo dove sono TodoMVC, chiamato angular-gettext-example.

Il flusso di lavoro è semplice:

1. aggiungere la direttiva "tradurre" per i modelli
2. Run grugnito da estrarre.modello pot (s)
3. mano dal pot al vostro fornitore di traduzioni o fai da te con poedit o software simili
4. rilasciare i file .po la traduzione di nuovo nel progetto
5. Run grugnito per compilare i file .po
6. Imposta la lingua predefinita nel tuo campo di applicazione
7. Guarda la magia!

Sono sicuro che anche le altre soluzioni pubblicate qui sono buone ma non ho visto un esempio end-to-end così ben organizzato come esempio angular-gettext.

Cheers, JD