Многоязычный с несколькими приложениями и 1 услугой перевода

Question

В настоящее время я делаю HTML-страницу, используя angularjs.

У меня есть 1 страница HTML, с 1 боковой панели, 1 панель навигации и 1 область содержимого. Как это: AdminLTE

Я следую этой инструкции: это

И успешно, мое приложение работает нормально. Но я не знаю, как применить многоязычную функцию к каждому моему приложению. Например: панель навигации - 1 приложение, боковая панель - 1 приложение, а основной контент - 1 приложение.

Как я могу применить 1 translationService к ним, не загружая json снова и снова?

Кто-нибудь может мне помочь? Спасибо.

Answer 1

Я все еще думаю, что было бы лучше иметь одно приложение для всей страницы, но иметь отдельные контроллеры для навигации, боковой панели и основного контента. Таким образом, они все работают по отдельности, но вам не неловко иметь дело с отдельными приложениями. Единственная причина, по которой я могу думать о наличии отдельных приложений, заключается в том, что вы хотите убедиться, что сервисы НИКОГДА не разделяются между различными частями. Однако, в вашем случае, похоже, что вы ХОТИТЕ совместно использовать сервис перевода, поэтому я думаю, что имеет смысл использовать одно приложение.

Если вы действительно хотите иметь несколько приложений, это все еще возможно. Вы можете загрузить переводы асинхронно, затем, когда это будет сделано, вы вызываете angular.module() для каждого приложения и вставлять переводы как константу. Затем, когда вы настраиваете поставщика перевода, вы можете добавить свою константу перевода так же, как если бы вы вводили любую службу.

Я делал это раньше в приложении, но сейчас у меня нет доступа к коду. Я сделал это для одного приложения, но вы можете легко распространить его на несколько приложений. Я считаю, что это выглядело примерно так:

var $http = angular.injector().get('$http');
var $q = angular.injector().get('$q');
var promises = [
    $http.get('path/to/translations/en.json'),
    $http.get('path/to/translations/fr.json'),
];
$q.all(promises)
   .then(function(translations) {
        angular.module('app', [])
            .constant('translations_en', translations[0])
            .constant('translations_fr', translations[1])
            .config(['$translateProvider', 'translations_en', 'translations_fr', 
                function($translateProvider, translations_en, translations_fr) {
                    $translateProvider.translations('en', translations_en);
                    $translateProvider.translations('fr', translations_fr);
                }]);
        angular.bootstrap(element, ['app']);
    });

Для нескольких приложений вам нужно будет запустить angular.module заблокировать один раз для каждого приложения.

Кроме того, вы можете определить отдельные модули для каждой части, а затем определить родительский модуль, который зависит от других мини-модулей, т.е.

angular.module('navigation', []);
angular.module('sidebar', []);
angular.module('mainPage', []);
angular.module('app', ['navigation', 'sidebar', 'mainPage']);
angular.bootstrap(element, ['app']);

Я считаю, что в этом случае все модули будут использовать один и тот же сервис перевода.