Angular UI-Router: несколько URL для одного состояния

Question

Я начал использовать пользовательский интерфейс Angular и пытаюсь понять, как несколько URL-адресов относятся к одному состоянию. Например:

/orgs/12354/overview
//retyrns the same pages as
/org/overview

Мой провайдер $state в настоящее время настроен на что-то вроде этого, и мне неясно, как проскользнуть по пути псевдонима "/org/ Overview", чтобы он правильно наследовал от родителя "org".

.state('org', {
  abstract: true,
  url: '/orgs/:orgID',
  templateUrl: '/client/navigation/main.html'
})
.state('org.overview', {
  url: '/overview',
  templateUrl: '/client/overview/overview.html',
  controller: 'OverviewCtrl'

})

Answer 1

Это может быть достигнуто с помощью when(), Предположим, что это состояние, на которое вы хотите указать несколько URL.

.state('app.home',
  {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })

В config() ты можешь использовать when() следующее:

angular.module('myApp', [])
   .config($urlRouterProvider){
       $urlRouterProvider.when(/homepage, ['$state','$match', function ($state, $match) {
          $state.go('app.home');
 }]);
}

Также вы можете добавить несколько URL, указывающих на одно и то же состояние.

Answer 2

Я думаю, что вам нужно только определить подсостояния без URL, как показано ниже.

.state('org', {
  abstract: true,
  url: '/orgs/:orgID',
  templateUrl: '/client/navigation/main.html'
})
.state('org.1', {
  templateUrl: '/client/overview/one.html',
  controller: 'OverviewCtrl'
})
.state('org.2', {
  templateUrl: '/client/overview/two.html',
  controller: 'OverviewCtrl'
})
.state('org.3', {
  templateUrl: '/client/overview/three.html',
  controller: 'OverviewCtrl'
})

Answer 3

Во-первых, абстрактное состояние не возвращает представление.

Кроме того, так как вы пытаетесь использовать множественное число orgs для просмотра списка и единственного числа org для представления элемента нельзя использовать добавленные маршруты, что является поведением по умолчанию.

.state('org', {
  url: '/orgs',
  templateUrl: '/client/navigation/main.html'
})
.state('org.overview', {
  url: '^/org/:orgID/overview'
  templateUrl: '/client/overview/overview.html',
  controller: 'OverviewCtrl'
})