Traduire votre application AngularJS

Un problème auquel vous serez sûrement confronté à un moment ou un autre, c’est la traduction de votre application dans différentes langues. On parle souvent d’i18n (internationalization) ou de l10n (localization), et même s’il existe une nuance, on utilise souvent les deux mots de manière interchangeable.

i18n et l10n dans AngularJS

AngularJS supporte de base l’i18n / l10n pour les dates, les nombres, et les monnaies sous forme de filtres. C’est à dire que selon la langue sélectionnée, on aura un formatage différent.

Une date, un nombre, un prix, en français :

  • dimanche 27 avril 2014
  • 10 000
  • 5 000,00 €

Les mêmes informations en anglais :

  • Sunday, April 27, 2014
  • 10,000
  • $5,000.00

C’est un bon début, mais si vous souhaitez réellement traduire votre application dans une autre langue, ça ne sera pas suffisant.

La solution est d’utiliser un module tel qu’angular-translate.

Exemple d’utilisation d’angular-translate

 

Demo sur plnkr.coTélécharger la source

 

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

  <head>
    <meta charset="UTF-8" />
    <title>angular-translation</title>
  </head>

  <body ng-controller="MainCtrl">
    <a href="#" ng-click="changeLanguage('en')">{{'BUTTON_LANG_EN' | translate}}</a>
    |
    <a href="#" ng-click="changeLanguage('fr')">{{'BUTTON_LANG_FR' | translate}}</a>

    <hr />

    <p>{{'TITLE' | translate}}</p>
    <p>{{'WELCOME_MESSAGE1' | translate:'{"name":"Gilles"}'}}</p>
    <p>{{'WELCOME_MESSAGE2' | translate:userData}}</p>

    <script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
    <script src="angular-translate.min.js"></script>
    <script src="app.js"></script>
  </body>

</html>

app.js

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    TITLE: 'Hello.',
    WELCOME_MESSAGE1: 'My name is {{name}}',
    WELCOME_MESSAGE2: 'And my name is {{name}}. I\'m {{age}} years old',
    BUTTON_LANG_EN: 'english',
    BUTTON_LANG_FR: 'french'
  });
  $translateProvider.translations('fr', {
    TITLE: 'Bonjour.',
    WELCOME_MESSAGE1: 'Mon nom est {{name}}',
    WELCOME_MESSAGE2: 'Et mon nom est {{name}}. J\'ai {{age}} ans',
    BUTTON_LANG_EN: 'anglais',
    BUTTON_LANG_FR: 'français'
  });
  $translateProvider.preferredLanguage('en');
});

app.controller('MainCtrl', function ($scope, $translate) {
  $scope.changeLanguage = function (key) {
    $translate.use(key);
  };

  $scope.userData = {
  	name: 'Xavier',
  	age: 25
  }
});

Explication du code

Pour rappel, la déclaration de votre application (qui n’est rien d’autre qu’un module) se fait de la manière suivante. Le premier paramètre est le nom votre application/module, le second est un tableau contenant les modules utilisés (‘pascalprecht.translate’ correspond à angular-translate).

var app = angular.module('myApp', ['pascalprecht.translate']);

La configuration de l’application se fait dans une fonction, et comme pour les contrôleurs, les services et autres, on peut injecter des dépendances :

app.config(function ($translateProvider) {

});

On définit les traductions pour une première langue (notez qu’il s’agit d’un objet javascript) :

$translateProvider.translations('en', {
    TITLE: 'Hello',
    WELCOME_MESSAGE1: 'My name is {{name}}',
    WELCOME_MESSAGE2: 'And my name is {{name}}. I\'m {{age}} years old',
    BUTTON_LANG_EN: 'english',
    BUTTON_LANG_FR: 'french'
  });

Puis pour une seconde :

$translateProvider.translations('fr', {
    TITLE: 'Bonjour.',
    WELCOME_MESSAGE1: 'Mon nom est {{name}}',
    WELCOME_MESSAGE2: 'Et mon nom est {{name}}. J\'ai {{age}} ans',
    BUTTON_LANG_EN: 'anglais',
    BUTTON_LANG_FR: 'français'
  });

On choisit une langue par défaut :

$translateProvider.preferredLanguage('en');

Que l’on pourra changer à la volée n’importe quand :

$scope.changeLanguage = function (key) {
  $translate.use(key);
};

Côté template, on précise la clé en utilisant soit un filtre, soit une directive (selon vos préférences) :

<!-- Sous forme de filtre -->
<p>{{'TITLE' | translate}}</p>
<!-- Ou de directive -->
<p translate="TITLE"></p>

Le texte peut également contenir des variables. Pour cela on passe un objet javascript directement depuis le template :

<!-- Un objet passé sous forme de string (qui sera parsé par Angular) -->
<p>{{'WELCOME_MESSAGE1' | translate:'{"name":"Gilles"}'}}</p>
<!-- Un objet du scope -->
<p>{{'WELCOME_MESSAGE2' | translate:userData}}</p>

Les propriétés de l’objet sont accessibles dans les traductions, de la manière suivante :

WELCOME_MESSAGE1: 'Mon nom est {{name}}',
WELCOME_MESSAGE2: 'Et mon nom est {{name}}. J\'ai {{age}} ans'

Conclusion

Cet exemple était relativement simple, mais sachez qu’il est également possible de :

  • Configurer le module de traduction autre part que dans config (services, contrôleurs…)
  • Charger les données via une requête AJAX
  • Grouper les traductions par « namespace ». Rappelez vous, les textes sont stockés dans un objet javascript, on peut donc créer une arborescence avec autant de niveaux que l’on souhaite
Share Button

4 thoughts on “Traduire votre application AngularJS

  1. Anas

    S’il vous plait j’ai besoin de votre aide, j’ai une application développer avec cakephp comment je peut intégrer avec AngularJs

    • Jordi Maylin

      Bonjour Anas,

      En général quand on utilise AngularJS, c’est pour faire une « single page application ». Les pages sont gérées par le routeur d’AngularJS, et une grande partie de la logique est côté client. Et tu peux utiliser un framework server-side, style CakePHP pour créer une API (pour récupérer des données par exemple)

      Mais tu peux aussi gérer les pages et la majeure partie de la logique côté serveur avec CakePHP, et dans ce cas tu pourrais quand même utiliser AngularJS, ne serait-ce que pour:
      – Bien organiser ton Javascript
      – Faire des appels asynchrones
      – Bénéficier de fonctionnalités sympathiques telles que le data binding ou les directives

  2. sdsd

    alert(‘okkkkk’);

  3. sdsdfghfg

    alert(‘okkkkk’);

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>