web-dev-qa-db-fra.com

Comment organiser au mieux les chaînes de traduction en angular-translate?

J'utilise angular-translate sur un projet Angular Angular $.

Par exemple, j'ai des modules A et B, où B est un sous-module de A. Il y a des chaînes qui se rapportent au HTML couvert par le module A, qui sont placées dans '/json/localization/A/en.json'. De même, il existe des chaînes relatives à B que je place dans '/json/localization/B/en.json'. Tout d'abord, je charge en.json de B dans le module B en utilisant $ translationProvider de angular-translate. Ensuite, je charge le module A en.json, en utilisant également $ translationProvider. Le problème est que le chargement des chaînes de A remplace les chaînes de B et elles sont perdues.

En utilisant angular-translate, existe-t-il un moyen de charger des chaînes par module, sans redéfinir, ou le module parent doit-il charger toutes les chaînes à partir d'un seul en.json?

Voici un exemple (en coffeescript) de la façon dont je charge les chaînes de traduction:

my_module.config(['$translateProvider', ($translateProvider) ->
  $translateProvider.useStaticFilesLoader
    prefix: '/json/localization/A/'
    suffix: '.json'

  $translateProvider.preferredLanguage 'en'
])
angularjsangular-translate
23
David Hansen

angular-translate prend en charge le chargement asynchrone des fichiers de langue partiels. Tous les partiels sont fusionnés en un seul dictionnaire par langue. La documentation officielle peut être trouvée ici: http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading

Il prend en charge l'application d'un modèle pour les modèles d'URL qui pointent vers les fichiers de langue modularisés:

$translateProvider.useLoader('$translatePartialLoader', {  
  urlTemplate: '/i18n/{part}/{lang}.json'
});

Depuis vos contrôleurs, vous pouvez ajouter des modules de langue et actualiser les liaisons de données comme ceci:

angular.module('contact')
  .controller('ContactCtrl',
    function ($scope, $translatePartialLoader, $translate) {  
      $translatePartialLoader.addPart('contact');
      $translate.refresh();
    });

Bien sûr, le chargement des partiels peut également être couvert dans la phase de résolution d'un itinéraire

Alternativement, vous pouvez également envisager de créer votre propre fonction de chargeur personnalisé. http://angular-translate.github.io/docs/#/guide/13_custom-loaders

Cela vous offre toute la flexibilité dont vous avez besoin pour combiner les modules linguistiques requis en une seule fois. Par exemple. vous pourriez faire quelque chose comme ça:

app.factory('customLoader', function ($http, $q) {
  // return loaderFn
  return function (options) {
    var deferred = $q.defer(); 
    var data = {
      'TEXT': 'Fooooo'
    };
    $http.get('nls/moduleA/en.json').success(function(moduleA){
      angular.extend(data, moduleA);
      $http.get('nls/moduleB/en.json').success(function(moduleB){
        angular.extend(data, moduleB);
        deferred.resolve(data);
      });
    });
    return deferred.promise;  
  };
});
33
benkroeger