Угловой JS: Перевод статических html-страниц с большим количеством текста

Question

Я в настоящее время локализую свой угловой сайт и angular-translate, кажется, является хорошим вариантом для небольших строк. Однако у меня есть несколько страниц с большим количеством статического содержимого html, такого как ToS или о странице, на которой я действительно не хочу втискиваться в файл JSON (смешанный с тэгами html и т. Д.).

Итак, есть способ использовать угловое преобразование (или даже без этого модуля) для сохранения содержимого в частичных представлениях (например, /partials/tos-en.html) и замены его в зависимости от языка?

Answer 1

Вы хотите получить код пользователя. Имея это, вы намереваетесь частично передать код языка как часть имени.

Угловая перевести модуль имеет 2 метода обслуживания интересов:

$translate.use() возвращает активный язык пользователя. К сожалению, если вы вызываете метод службы до того, как язык загружается на страницу, вы можете получить нуль.

$translate.proposedLanguage() возвращает «предполагаемый язык» - это означает, что вы получите вызов $translate.use(), но этот вызов будет успешным, даже если язык не загружен. Имея этот список language codes, вы можете использовать их для создания партитур для языков, которые вы собираетесь поддерживать.

Что-то вроде

<div ng-include="about-{{ $translate.proposedLanguage() }}.html"> 
</div> 

Answer 2

Я рекомендовал бы идти вниз частичный путь Выделенное. Перевод небольших фрагментов текста работает для ввода в меню, но заканчивается тем, что он неуклюже читает весь документ. Переводчик должен иметь возможность изменять такие вещи, как предложение и структуру абзаца, чтобы он выглядел естественным.

Чтобы реализовать это, я бы использовал Apache's content negotiation (mod_negotiation). Ваш угловой код остается простым, просто обратитесь к /partials/tos.html. Apache затем предоставляет tos.html.en, tos.html.fr или tos.html.de и т. Д. По своему усмотрению.

Настройка согласования содержимого требует использования Apache и возможности редактировать файлы конфигурации, но не очень сложна для изучения. Я также предлагаю следовать инструкциям, чтобы включить cookie-файл предпочтительного языка, это позволяет вам предоставить механизм выбора языка, который переопределяет настройки языка браузера пользователей.

Answer 3

Создайте HTML-код для каждого языка. Прослушайте событие $ translateChangeSuccess в контроллере и создайте URL-адрес для частичного при каждом изменении языка. Вместо этого используйте URL в своем представлении в директиве ngInclude.

V2, лучший подход

Ваш контроллер

myApp.controller('MyCtrl', ['$rootScope', '$scope', '$translate', function ($rootScope, $scope, $translate) { 
    ($scope.setTranslatedPartials = function() { 
     $scope.translatedPartials = { 
      "partialOne": "/partials/partial_one_" + $translate.use() + ".html", 
      "partialTwo": "/partials/partial_two_" + $translate.use() + ".html" 
      //... 
     }; 
    })(); 

    $rootScope.$on("$translateChangeSuccess", function (event, next, current) { 
     $scope.setTranslatedPartials(); 
    }); 
}]); 

Ваше мнение

<div ng-controller="MyCtrl"> 
    <ng-include src="translatedPartials.partialOne"></ng-include> 
    <ng-include src="translatedPartials.partialTwo"></ng-include> 
</div> 

---

V1 оригинальный подход

Ваш контроллер

myApp.controller('MyCtrl', ['$rootScope', '$scope', '$translate', function ($rootScope, $scope, $translate) { 
    /*Initialize first so you have it when coming back to the page without the langugage changing*/ 
    $scope.partial = "/partials/" + $translate.use() + ".html" 

    $rootScope.$on("$translateChangeSuccess", function (event, next, current) { 
     $scope.partial = "/partials/" + $translate.use() + ".html" 
    }); 
}]); 

Ваше мнение

<div ng-controller="MyCtrl"> 
    <ng-include src="partial"></ng-include> 
</div>