AngularJS - Internationalisation - Partie 2 : Changement dynamique du format des dates et des nombres

Article précédent : AngularJS - Internationalisation - Partie 1 : Gestion des libellés

Dans la première partie, nous avons utilisé angular-translate pour gérer l'internationalisation des libellés.

Nous allons maintenant changer le format des dates et des nombres lors du changement de la langue par l'utilisateur.

L'objet $locale de AngularJS contient les informations sur le format des dates et des nombres. Il est utilisé par AngularJS pour formater les valeurs pour qu'elles soient dans le format de la langue de l'utilisateur.

Cet objet $locale est défini à partir des fichiers présents dans le répertoire "i18n" de AngularJS et n'est chargé qu'une seule fois uniquement lors du démarrage de AngularJS.

Nous voulons maintenant que l'objet $locale soit rechargé pour qu'il corresponde à la langue sélectionné par l'utilisateur lorsque celui-ci clique sur le bouton de changement de langue.

Pour cela, nous utiliserons la librairie angular-dynamic-locale pour effectuer ce changement dynamique de l'objet $locale.

Nous reprendrons le code écrit dans la première partie et ajouterons le support de la librairie angular-dynamic-locale.

Formatter les dates et les nombres

Dans les pages, nous pouvons définir le formatage des dates et des nombres de la manière suivante :

Date

Nous utilisons le filter date de AngularJS :

{{ creation | date:'shortDate'}}

, avec :

• | date : le filter date de AngularJS
• :'[format]' : le format de la date, ex: 'shortDate', 'short', etc.

Nous avons ainsi pour la date du 7 avril 2014 :

• dans le format anglais : 4/7/2014
• dans le format français : 07/04/2014

Voir documentation : http://docs.angularjs.org/api/ng/filter/date

Nombre

Nous formatons les nombres à l'aide du filter number de AngularJS :

{{ size | number }}

Nous avons ainsi pour le montant 19.76 :

• dans le format anglais : 19.76
• dans le format français : 19,76

Voir documentation : http://docs.angularjs.org/api/ng/filter/number 

Montant

Nous formatons lesmontants à l'aide du filter currency de AngularJS :

{{ price | currency:"€" }}

Nous avons ainsi pour le montant 19.76 en euro :

• dans le format anglais : €19.76
• dans le format français : 19,76 €

Voir documentation : http://docs.angularjs.org/api/ng/filter/currency  

Installation

Nous installons la librairie angular-dynamic-locale

• Aller sur la page Github :
• https://github.com/lgalfaso/angular-dynamic-locale
• Cliquer sur le bouton Download Zip dans la partie droite de la page
• Dans le répertoire src du fichier Zip, extraire le fichier src/tmhDynamicLocale.js pour le copier dans le répertoire lib/angular-dynamic-locale de notre projet
• Dans la page principale de notre projet, ajouter l'inclusion de ce script :

Configuration

Dans la configuration de AngularJS, nous indiquons la localisation des fichiers angular-locale-*.js de AngularJS. Nous indiquons également que l'indicateur de la langue sera stocké dans le navigateur.

Avec le support de l'utilisation de la librairie angular-translate et de angular-dynamic-locale, nous obtenons le code suivant :

Changement de langue

Nous allons mettre à jour le code du Controller TranslateCtrl de changement de langue :
Nous avons ajouté la ligne :

tmhDynamicLocale.set(key);

Elle indique que l'objet $locale est rechargé à l'aide du fichier angular-locale-[key].js situé dans le répertoire i18n de AngularJS.

$route.reload(false);

Cette ligne force le rafraîchissement (sans faire d'appel serveur) des composants et des directives AngularJS pour qu'ils se basent sur le nouvel objet $locale avec les nouveaux formats de date et de nombre.
Ainsi si nous avons un datepicker, comme avec angular-strap, celui-ci va utiliser le nouvel objet $locale.
Par contre, les données qui n'ont pas été enregistrées sont perdues car le $scope des controllers sont réinitialisés.

Maintenant, lorsque l'utilisateur clique sur le bouton pour changer de langue, les dates et les nombres sont maintenant affiché dans le format régional de l'utilisateur.

Conclusion

L'utilisation conjointe de angular-translate et de angular-dynamic-locale apporte le support de l'internationalisation sur une application AngularJS.

Références

• angular-dynamic-locale : https://github.com/lgalfaso/angular-dynamic-locale