Nous allons voir dans cet article comment externaliser les libellés d'une application AngularJS dans des fichiers JSON statiques.
Nous voulons que le libellé soit récupérer à partir du code de ce libellé et dans la langue de l'utilisateur.
Nous stockons pour cela les libellés dans des fichiers JSON :
i18n/messages_fr.json:
Chaque fichier JSON est statique et correspondant à une seule langue, c'est pourquoi il contient le code de la langue dans son nom de fichier.
AngularJS ne fournit pas par défaut ce système de gestion des libellés.
C'est pourquoi nous allons utiliser la librairie angular-translate.
Le système de localStorage du navigateur sera utilisé pour conserver la langue sélectionnée par l'utilisateur.
Installation
Les librairies de angular-translate sont disponibles sur le github du projet :Nous installons manuellement les librairies de angular-translate :
- Télécharger les librairies depuis les pages suivantes :
- https://github.com/angular-translate/bower-angular-translate/releases
- https://github.com/angular-translate/bower-angular-translate-storage-cookie/releases
- https://github.com/angular-translate/bower-angular-translate-storage-local/releases
- https://github.com/angular-translate/bower-angular-translate-loader-static-files/releases
- Copier dans notre projet les fichiers Javascript de chaque zip téléchargé
- Inclure ces scripts dans la page principale de notre projet :
Configuration de AngularJS
Nous configurons maintenant AngularJS pour la gestion des libellés :Ici, nous avons indiqué que la langue par défaut est l'anglais et que nous stockons dans le localStorage du navigateur l'information indiquant la langue de l'utilisateur.
Nous avons également indiqué que les fichiers JSON des libellés sont statiques et sont situés dans le répertoire "i18n" du projet, que le nom du fichier commence par "message_" et se termine par ".json".
Avec angular-translate, plusieurs options sont possibles et sont documentées sur leur site :
Il faudra veiller à télécharger et à installer les scripts correspondant aux options choisies en les récupérant les fichiers ZIP des releases des repositories bower-angular-translate-*** depuis le github de angular-translate.
Et dans le cas où le projet dispose de bower il faut inclure les dépendances vers les librairies dans le fichier de bower.
Définir les libellés dans la page
Nous avons deux possibilités pour définir les libellés dans la page HTML :Via la directive "data-translate"
Nous utilisons la directive "data-translate" avec en valeur le code du libellé à traduire.Exemple :
<span data-translate="book"></span>va devenir :
<span>Livre</span>
La contrainte de l'utilisation de la directive est qu'elle va remplacer tout le contenu de la balise par le libellé.
L'avantage est que l'utilisateur ne voit pas le texte changer lors du premier chargement de la page. En fait au premier chargement de la page, le contenu de la balise sera affiché à l'utilisateur avant que AngularJS n'ait eu le temps de remplacer le contenu de cette balise.
C'est pourquoi la directive est à utiliser pour la page principale qui contient l'inclusion des scripts de AngularJS, et de ne pas y mettre de contenu pour éviter que l'utilisateur ne voit le texte être remplacé.
Via le filter "translate"
Pour les pages non principales, c'est à dire qui ne contiennent pas l'inclusion des scripts de AngularJS, nous pouvons utiliser le filter pour indiquer les libellés à traduire.La syntaxe est la suivante :
{{ 'code.libelle' | translate }}
Attention, il ne faut pas oublier les apostrophes autour du code du libellé.Le code du libellé sera remplacé par le libellé correspondant dans la langue de l'utilisateur.
Changement de langue
Controller
Nous ajoutons un Controller pour le changement de langue :Bouton
Et nous ajoutons les liens pour changer la langue :ce qui donne :
Les libellés sont changés instantanément sans rafraîchissement de la page.
Conclusion
La librairie angular-translate permet d'externaliser les libellés des pages sous AngularJS.Dommage que AngularJS n'ait pas apporté son propre système de libellés.
D'autres solutions existent, l'avantage de cette solution est qu'elle n'a pas d'effet de bord car on ne stocke pas les libellés dans le $scope d'un Controller.
