angularjs - navigationend - title angular 6

¿Cómo organizar mejor las cadenas de traducción en traducción angular?

Question

Estoy usando la traducción angular en un proyecto angular bastante grande. Estoy dividiendo el proyecto en varios módulos para hacerlo más manejable, pero no puedo dividir las cadenas de traducción por módulo.

Por ejemplo, tengo los módulos A y B, donde B es un submódulo de A. Hay cadenas que pertenecen al HTML cubierto por el módulo A, que se colocan en ''/json/localization/A/en.json''. Del mismo modo, hay cadenas pertenecientes a B que coloco en ''/json/localization/B/en.json''. Primero, cargo B''s en.json en el módulo B usando $ translationProvider de angular-translate. Luego cargo el módulo A en.json, también usando $ translationProvider. El problema es que cargar las cuerdas de A anula las de B y se pierden.

Usando angular-translate, ¿hay una manera de cargar cadenas por módulo, sin anularlas, o el módulo principal tiene que cargar todas las cadenas de un solo en.json?

Aquí hay un ejemplo (en coffeescript) de cómo estoy cargando las cadenas de traducción:

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

  $translateProvider.preferredLanguage ''en''
])

Answer 1

angular-translate soporta la carga asíncrona de archivos parciales de idioma. Todos los parciales se fusionan en un diccionario por idioma. La documentación oficial se puede encontrar aquí: http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading

Admite la aplicación de una plantilla para las plantillas de URL que apuntan a los archivos de idioma modularizados:

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

Desde sus controladores, puede agregar módulos de idioma y actualizar los enlaces de datos de esta manera:

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

Por supuesto, la carga de los parciales también se puede cubrir en la fase de resolución de una ruta.

Alternativamente, también puede considerar la creación de su propia función de cargador personalizado. http://angular-translate.github.io/docs/#/guide/13_custom-loaders

Esto proporciona toda la flexibilidad que necesita para combinar los módulos de idioma requeridos en una sola toma. Por ejemplo, podrías hacer algo como esto:

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;  
  };
});