Угловой UI-маршрутизатор - одно состояние с несколькими URL-адресами

У меня есть запрос добавить в другой параметр URL, который направляет в состояние, которое я уже настроил. Для повышения эффективности я пытаюсь проверить, могу ли я добавить несколько URL-адресов, чтобы указать на одно и то же состояние, или просто использовать метод $UrlRouterProvider.when() для перенаправления в это состояние в этом новом случае.

Ex. это то, что уже существует

.state('site.link1',
  {
    url: '/link1',
    templateUrl: '/views/link1.html',
    controller: 'link1Ctrl'
  })

и запрос должен добавить www.site.com/newlink, который указывает на страницу link1. Есть ли что-то подобное:

.state('site.link1',
  {
    url: '/link1, /newlink',
    ...

Ответы

Ответ 1

Вы используете параметры:

https://github.com/angular-ui/ui-router/wiki/URL-Routing

.state('site.link',
{
    url: '/{link}'
    ..
}

поэтому, когда вы используете такое же состояние, как это,

$state.go('site.link', {link: 'link1'})
$state.go('site.link', {link: 'link2'})

Ответ 2

Попробуйте использовать Regex и параметр в URL-адресе. Это не оптимально, но работает.

.state('site.link1',
 {
   url: '/{path:link1|newlink}',
   templateUrl: '/views/link1.html',
   controller: 'link1Ctrl'
 })

Дополнительная информация о regex в Urls http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.type:UrlMatcher

Чтобы создать ссылки с ui-sref, передайте тот же параметр с именем состояния как функции

<a ui-sref="site.link1({path:'link1'})" >site link 1</a>
<a ui-sref="site.link1({path:'newlink'})">site new link</a>

Ответ 3

вы можете использовать when() function

.state('site.link1',
  {
    url: '/link1',
    templateUrl: '/views/link1.html',
    controller: 'link1Ctrl'
  })

затем в корневой конфигурации

angular.module('myApp', [...])
   .config(function ($urlRouterProvider) {
       $urlRouterProvider.when(/newlink/, ['$state','$match', function ($state, $match) {
           $state.go('site.link1');
       }]);
    });

Ответ 4

Я нашел этот подход достаточно простым и чистым: создайте два равных состояния, просто изменив свойство url

//Both root and login are the same, but with different url's.
var rootConfig = {
    url: '/',
    templateUrl:'html/authentication/login.html',
    controller: 'authCtrl',
    data: {
        requireLogin: false
    }
}

var loginConfig = Object.create(rootConfig)
loginConfig.url = '/login'

$stateProvider
    .state('root', rootConfig)
    .state('login', loginConfig)

Ответ 5

У меня была почти такая же проблема, только с другим ограничением - я не хотел использовать перенаправление, так как я хотел, чтобы URL-адрес в браузере оставался прежним, но отображал одно и то же состояние. Это связано с тем, что я хотел, чтобы сохраненные пароли chrome работали для пользователей, которые уже сохранили предыдущий URL.

В моем случае мне нужны эти два URL:
/gilly и
/new/gilly
оба указывают на одно и то же состояние.

Я решил это, установив одно состояние для /gilly, а для второго url я определил абстрактное состояние, называемое /new.

Это нужно настроить следующим образом:

$stateProvider.state('new', {
    abstract: true,
    url: '/new'
    template: '',
    controller: function() { }
}).state('gilly', {
    url: '/gilly',
    template: 'gilly.html',
    controller: 'GillyController'
}).state('new.gilly', {
    url: '/gilly',  // don't add the '/new' prefix here!
    template: 'gilly.html',
    controller: 'GillyController'
});