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

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

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

Вот кусочек кода что я имею plnkr.co/edit/k8cXldaNa78kqkqgkw37?p=preview
Буду очень благодарен за помощь и возможный пример кода.
  • Вопрос задан
  • 1078 просмотров
Решения вопроса 1
Комментировать
Пригласить эксперта
Ответы на вопрос 2
mudrick
@mudrick
Máximo progreso hemos alcanzado en minimo seso.
Изящного решения не предложу и на вопрос не отвечу, но оставлю здесь свой комментарий, для истории :)

Хочу отговорить вас делать такую маршрутизацию — совершенно не обязательно загрязнять УРЛ данными о языке (особенно писать /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.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
// в conifg
$stateProvider
    .state('app', {
        abstract: true,
        url: '/{locale}'
    });


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

update

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы