Как лучше организовать строки перевода в angular-translate?

Я использую angular-translate в довольно большом проекте Angular. Я разбиваю проект на несколько модулей, чтобы сделать его более управляемым, но я не могу разбить свои строки перевода на модуль.

Например, у меня есть модули A и B, где B является подмодулем A. Есть строки, относящиеся к HTML-коду, охватываемому модулем A, которые размещены в '/json/localization/A/en.json'. Точно так же есть строки, относящиеся к B, которые я помещаю в '/json/localization/B/en.json'. Сначала я загружаю en.json B в модуль B, используя $translationProvider angular-translate. Затем я загружаю en.json модуля A, также используя $translationProvider. Проблема в том, что загрузка строк A переопределяет строки B, и они теряются.

Используя angular-translate, есть ли способ загрузить строки для каждого модуля без переопределения, или родительский модуль должен загружать все строки из одного en.json?

Вот пример (в coffeescript) того, как я загружаю строки перевода:

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

  $translateProvider.preferredLanguage 'en'
])

angularjs angular-translate
person David Hansen    schedule 14.07.2014    source источник

Ответы (1)


arrow_upward
33
arrow_downward

angular-translate поддерживает асинхронную загрузку части языковых файлов. Все партиалы объединены в один словарь для каждого языка. Официальную документацию можно найти здесь: http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading

Он поддерживает применение шаблона для шаблонов URL, которые указывают на модульные языковые файлы:

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

Изнутри ваших контроллеров вы можете добавлять языковые модули и обновлять привязки данных следующим образом:

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

Конечно, загрузка партиалов также может быть рассмотрена на этапе разрешения маршрута.

В качестве альтернативы вы также можете изучить создание собственной пользовательской функции загрузчика. http://angular-translate.github.io/docs/#/guide/13_custom-loaders

Это обеспечивает всю гибкость, необходимую для объединения необходимых языковых модулей в одном кадре. Например. вы можете сделать что-то вроде этого:

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;  
  };
});
person benkroeger    schedule 17.08.2014
comment
Как вы могли бы предотвратить FOUC (Flash непереведенного контента) с помощью этого решения? - person ingaham; 02.11.2015
comment
Авторы модуля уже ответили на этот вопрос в своем руководстве о 3/4 вниз по странице. В качестве альтернативы вы можете добавить переведенный контент в свойства разрешения для вашего маршрута. И ngRouter, и uiRouter поддерживают это. - person benkroeger; 03.12.2015
comment
что, если в производстве (со всеми мини-файлами *.js) urlTemplate, указанный в useLoader, изменится, как вы с этим справитесь? - person enricop89; 29.08.2016