Angular UI-Router:单个状态的多个URL

Question

我已经开始使用angular的ui-router,我试图弄清楚如何让多个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'
})