2015-03-03 2 views
1

У меня есть веб-приложение AngularJS. Я меняю приложение, поэтому URL-адреса могут быть многоязычными (для целей индексирования SEO).AngularJS многоязычная маршрутизация URL со ссылками

I'm настройка моего app.js, как это:

$routeProvider.when('/:language', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});  
    $routeProvider.when('/:language/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'}); 

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

Все работает до сих пор.

Но теперь все мои внутренние ссылки, т. Е. <a href="/about">{{'ABOUT' | translate}}</a>, перестали работать, потому что им не хватает параметра языка.

Мой подход заключается в том, чтобы установить язык в сервисе и заставить его объединить его в ссылках, что-то вроде <a href="{{TranslationService.getLanguage()}}/about">{{'ABOUT' | translate}}</a>. Конечно, это заставит меня реорганизовать все мои ссылки.

Правильно ли это, или есть более умный?

+0

Я сделал то же самое, но также добавил слушателя $ routeChangeStart, который установит $ rootScope.language в текущую локаль. Таким образом, я могу использовать более короткий {{language}} для ввода языка –

ответ

-1

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

+0

, это не должно быть принятым ответом, поскольку он не обеспечивает решение этого вопроса. Вы должны либо улучшить, либо удалить его. – boroboris

1

Вы можете использовать плагин ui-router и определить свои маршруты как вложенные.

https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states

$stateProvider 
    .state('home', { 
    url: '/:language', 
    ... 
    }) 
    .state('home.about', { 
    url: '/about', 
    ... 
    }); 

Затем, вы можете использовать директиву ui-sref и навигации по маршрутам с относительным путем.

home.html: Для того, чтобы перейти к «О» ребенок маршрут <a ui-sref=".about">About</a>

about.html: Чтобы перейти к родительскому маршруту <a ui-sref="^">Home</a>

Смежные вопросы