Làm thế nào để tổ chức tốt nhất các chuỗi dịch trong góc dịch?

Question

Tôi đang sử dụng góc dịch trên một dự án Angular khá lớn. Tôi đang phá vỡ các dự án thành nhiều mô-đun để làm cho nó dễ quản lý hơn, nhưng tôi không thể phá vỡ các chuỗi dịch của tôi cho mỗi mô-đun.

Ví dụ, tôi có mô-đun A và B, trong đó B là môđun con A. Có các chuỗi liên quan đến HTML được bao phủ bởi mô-đun A, được đặt trong '/json/localization/A/en.json '. Tương tự như vậy, có các chuỗi liên quan đến B mà tôi đặt trong '/json/localization/B/en.json'. Đầu tiên tôi nạp en.json của B vào module B bằng cách sử dụng $ translationProvider của angular-translate. Sau đó, tôi nạp en.json của mô-đun A, cũng sử dụng $ translationProvider. Vấn đề là việc tải các chuỗi A sẽ ghi đè các chuỗi B và chúng bị mất.

Sử dụng dịch chuyển góc, có cách nào để tải chuỗi cho mỗi mô-đun, không ghi đè hoặc mô-đun gốc có tải tất cả các chuỗi từ một tệp en.json không?

Dưới đây là một ví dụ (trong coffeescript) như thế nào tôi tải các chuỗi dịch:

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

    $translateProvider.preferredLanguage 'en' 
]) 

Answer 1

góc-dịch hỗ trợ async tải các tập tin ngôn ngữ một phần. Tất cả các partials được hợp nhất thành một từ điển cho mỗi ngôn ngữ. Các tài liệu chính thức có thể được tìm thấy ở đây: http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading

Nó hỗ trợ áp dụng mẫu cho các mẫu url trỏ đến các tập tin ngôn ngữ modularised:

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

Từ bên trong bộ điều khiển của bạn, bạn có thể thêm các module ngôn ngữ và làm mới liên kết dữ liệu như thế này:

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

Tất nhiên, tải partials cũng có thể được đề cập trong một lộ trình giai đoạn quyết

Ngoài ra, bạn cũng có thể xem xét xây dựng chức năng trình tải tùy chỉnh của riêng bạn. http://angular-translate.github.io/docs/#/guide/13_custom-loaders

Điều này cung cấp tất cả sự linh hoạt bạn cần để kết hợp các mô-đun ngôn ngữ yêu cầu trong một lần chụp. Ví dụ. bạn có thể làm một cái gì đó như thế này:

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