Internationalisation d'une application AngularJs ================================================ ![category](web) ![tag](angularjs) Il existe un module permettant d'internationaliser simplement une application angularjs. Ce module nomé angular-translate permet notamenent de traduire une application via l'utilisation d'un fichier de traduction au format json Installation ------------ Comme d'habitude l'installation se fait par bower_components ```bash bower install angular-translate bower install angular-translate-loader-static-files ``` Il faut aussi modifier la structure de notre application ```bash cd myappli mkdir languages ``` Utilisation ----------- Fichier de traduction ~~~~~~~~~~~~~~~~~~~~~ Nous devons créer deux types de fichier: * un fichier indiquant les langues disponibles * un fichier par languages languages/locales.json ```json { "fr": { "id": "fr", "title": "Français" }, "en": { "id": "en", "title": "English" }, } ``` languages/locales-fr.json ```json { "TITLE": "Mon titre", "TITLE_Other": "un autre titre", } ``` languages/locales-en.json ```json { "TITLE": "My Title", "TITLE_Other": "a other title", } ``` Intégration dans l'application ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Il faut ajouter ce module au niveau de notre application dans le fichier app.js ```note Dans notre exemple on initialise le language de l'application en prenant le language du naviguateur ou de l'os. SI il ne trouve pas de langue il utilise la langue préférentielle ``` ```javascript var module = angular.module("MyAppli", ['pascalprecht.translate']); // Configuring $translateProvider module.config(function($translateProvider) { $translateProvider.preferredLanguage('en'); $translateProvider.useStaticFilesLoader({ prefix: 'languages/locale-', suffix: '.json' }); }); module.constant("LOCALES", "languages/locales.json"); // add controler module.controller('AppController', function($scope, $mdSidenav, $http, LOCALES, $translate) { //manage webservice $scope.getInit = function() { //menu //language $http.get(LOCALES). success(function(data, status, headers, config) { $scope.locales = data; var lang = window.navigator.userLanguage ||window.navigator.language; if ($scope.locales[lang]) { $scope.changeLocales(lang); }; }). error(function(data, status, headers, config) { alert('error init locales'); }); }; // manage display $scope.changeLocales = function(idlocale) { $translate.use(idlocale); $scope.selectedLocale = idlocale; } // init data $scope.getInit(); }); ``` Mais aussi notre fichier html pour * ajouter l'importation du module * un bouton permettant la selection du language * utiliser le module ```html ... ... ...

{{lang.title}}

... {{ 'TITLE' | translate}} ... ... {{ myvar | translate}} ``` On peut trouver l'ensemble d'une application test [ici](images/brasil.zip)`