web-dev-qa-db-ja.com

角度変換で翻訳文字列を最適に整理する方法は？

私はかなり大きなAngularプロジェクトで角度変換を使用しています。プロジェクトを複数のモジュールに分割して管理しやすくしていますが、モジュールごとに翻訳文字列を分割することはできません。

たとえば、モジュールAとBがあり、BはAのサブモジュールです。モジュールAでカバーされるHTMLに関連する文字列があり、「/ json/localization/A/en.json」に配置されます。同様に、「/ json/localization/B/en.json」に配置するBに関連する文字列があります。まず、angular-translateの$ translationProviderを使用して、モジュールBにBのen.jsonをロードします。次に、$ translationProviderも使用して、モジュールAのen.jsonをロードします。問題は、Aの文字列を読み込むとBの文字列が上書きされ、失われることです。

角度変換を使用して、オーバーライドせずにモジュールごとに文字列をロードする方法はありますか、または親モジュールは単一のen.jsonからすべての文字列をロードする必要がありますか？

翻訳文字列をロードする方法の例を（coffeescriptで）以下に示します。

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

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

角度変換は、部分言語ファイルの非同期読み込みをサポートします。すべてのパーシャルは、言語ごとに1つの辞書にマージされます。公式のドキュメントはここにあります： 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;  
  };
});
33
benkroeger