Как добится мультиязычной маршрутизации в angularjs?

Question

[yanolsh]

Написал мультиязычное SPA приложение на angular. Перевод на другие языки делается через сервис который берет перевод с .json файлов. Есть dropdown с языками. ПОльзователь нажимает и перевод страницы меняется. Как сделать

test.com/en/about
test.com/ru/about

Вот кусочек кода что я имею plnkr.co/edit/k8cXldaNa78kqkqgkw37?p=preview
Буду очень благодарен за помощь и возможный пример кода.

Answer 1

[Сергей]

fadeit.dk/blog/post/angularjs-seo-for-angular-translate

Answer 2

[Артур Мудрик]

Изящного решения не предложу и на вопрос не отвечу, но оставлю здесь свой комментарий, для истории :)

Хочу отговорить вас делать такую маршрутизацию — совершенно не обязательно загрязнять УРЛ данными о языке (особенно писать /en, когда у вас домен .com — это же и так обычно английский; или писать /ru при домене на .ru — там же и так русский обычно). Посмотрите на любой многоязычный сайт — там нет языка в адресной строке ни в каком виде, это уже прошлый век. (Исключение состовляют только огромедные сайты, где не только язык интерфейса разделен, но и сам контент и даже поиск по нему — например, Википедия).

При заходе пользователя на сайт, берете язык из куков или определяете его язык (это делается средствами браузера — navigator.language и иже с ним) и сохраняете полученный язык в куках. Загружаете файл-локализации. Всё. Если пользователь нажал на другой язык, то сохраняете его в куках и подгружаете другой файл локализации.

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

Так же запаритесь каждый раз при вызове, например, $location.path(...), передавать туда еще и текущий язык. И сам конфиг роутов у вас будет выглядеть неизящно:

$routeProvider
        .when('/:lang/about',
            {
                templateUrl: 'pages/about.html',
                controller: 'AboutController'
            })

и так каждый роут.

Ну и еще, а если пользователь ручками наберет адрес раздела в адресной строке и забудет язык указать (наберет просто mysite.com/about, а не mysite.com/ru/about), то что, приложение не будет работать?

А для локализации используйте Angular Translate.

Comments

[yanolsh]

допустим насчет маршрутизации я могу не заморачиваться. А как сделать metatag keywords, description для каждой страницы и для каждого языка. В целях индексирования поисковиком?

[Артур Мудрик]

Это очень проблемное место Ангулара — для поисковиков придется генерировать страницы на сервере и подставлять их роботам.

[yanolsh]

Артур Мудрик: a можно материал по этой теме какой то. ПРосто долго искал multilingual angular seo и ничего подходящего не смог найти. Заранее спасибо

[Артур Мудрик]

yanolsh: никогда не занимался рендерингом Ангулар-приложений для индексировния, но искать нужно по словам «angular server rendering». Или создайте отдельный вопрос по поводу рендеринга Ангуларовских страничек на сервере для индексирования их роботами, наверняка кто-то уже хотя бы игрался/пытался.

Answer 3

[Сергей Протько]

// в conifg
$stateProvider
    .state('app', {
        abstract: true,
        url: '/{locale}'
    });

Еще неплохой вариант - навесить фронт контроллер на app и брать оттуда локаль, сетить в сервис и т.д.

update

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

Идея такая - создается базовое правило, от которого уже все состояния наследуются. И локаль прописывается именно там, и управление происходит в эдаком фронт-контроллере, навешенном на все приложение.

Comments

[yanolsh]

Можно Чуть более подробно?

[Сергей Протько]

yanolsh:
$("#langChoice").change(function(){

нет.

Ну если честно, сейчас распишу.