Пользовательский интерфейс AngularJs - одно состояние с несколькими URL

Question

У меня есть запрос на добавление другого параметра 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',
    ...

Answer 1

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

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

Больше информации о регулярных выражениях в URL.

Для создания ссылок с ui-sref передать тот же параметр с именем состояния в качестве функции

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

Answer 2

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

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'})

Answer 3

Вы можете использовать when() функция

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

тогда на root config

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

Answer 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)

Answer 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'
});