Angular UI-Router: Multiple URLs to single state

Question

I have started using angular's ui-router, and I am trying to figure out how to have multiple URLS refer to a single state. For example:

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

My $state provider is currently set with something like this, and its unclear to my how to slip in the alias '/org/overview' route such that it properly inherits from the 'org' parent.

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

})

score 6 · Answer 1 · edited Oct 25 '16 at 18:48

6

This can be achieved using when(). Suppose this is the state you want to point to with multiple urls.

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

In config() you can use when() as follows:

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

Likewise you can add multiple urls pointing to same state.

edited Oct 25 '16 at 18:48

Jeremy Wiebe

3,894
22
31

answered May 22 '15 at 05:28

avinashkrsharma

143
1
9

This solution won't work if you want to have a URL like /orderOverview of a state 'orderOverview' and because of a different context you want to have another URL like /orderHistory which should point to the same state 'orderOverview' BUT keep the entered/used URL in your address bar. – Ilker Cat May 03 '16 at 08:16
Your solution would cause a changed URL. – Ilker Cat May 03 '16 at 09:00

score 1 · Answer 2 · answered Oct 20 '14 at 16:04

1

I think you only need to define substates without an url like below.

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

answered Oct 20 '14 at 16:04

cbass

2,548
2
27
39

1

how would this know that "/overview" was a valid route, since its not part of the /orgs path? – Zak Kus Oct 20 '14 at 20:15
I haven't tested this, but you should be able to put the controller in the abstract state, because it's the same across all of the children, right? – Matt Grande Feb 25 '16 at 14:43

score 0 · Answer 3 · answered May 22 '15 at 00:03

Firstly, an abstract state doesn't return a view.

Also, since you're trying to use the plural orgs for the list view, and the singular org for the item view, you can't use appended routes, which is the default behavior.

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

Angular UI-Router: Multiple URLs to single state

3 Answers3

Linked