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'

})

Jeremy Wiebe · Accepted Answer · 2016-10-25 18:48:35Z

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, 2016 at 18:48

Jeremy Wiebe

3,96325 silver badges31 bronze badges

answered May 22, 2015 at 5:28

avinashkrsharma

1431 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ilker Cat Over a year ago

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 Over a year ago

Your solution would cause a changed URL.

cbass · Accepted Answer · 2014-10-20 16:04:34Z

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, 2014 at 16:04

cbass

2,5583 gold badges29 silver badges39 bronze badges

2 Comments

Zak Kus Over a year ago

how would this know that "/overview" was a valid route, since its not part of the /orgs path?

Matt Grande Over a year ago

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?

naterkane · Accepted Answer · 2015-05-22 00:03:35Z

0

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

answered May 22, 2015 at 0:03

naterkane

512 bronze badges

Collectives™ on Stack Overflow

Angular UI-Router: Multiple URLs to single state

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related