AngularJs UI router - one state with multiple URLs

Question

I have a request to add in another URL parameter that directs to a state that I already have set up. For efficiency purposes, I'm trying to see if I can add multiple URLs to point to the same state, or should I just use the $UrlRouterProvider.when() method to re-direct to that state in this new case.

Ex. this is what already exists

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

and the request is to add www.site.com/newlink that points to the link1 page. Is there something like this;

.state('site.link1',
  {
    url: '/link1, /newlink',
    ...

Currently you'd have to use either .when or define state multi times, with different url... there is some how to: http://stackoverflow.com/a/23853129/1679310 — Radim Köhler, Jan 25 '15 at 15:48
if the only change is the stateParams you can get away with the same route and just passing empty param, the only thing that is not so elegant is that you'll have a "//" in your url. if the spec is defining a completely different url then a new state is needed — Dayan Moreno Leon, Jan 25 '15 at 16:23
if 2 different param value on the same state redirects to these different ursl then you can use templateurl as a function where you get first argument as routeparam and return the url accordingly. but it is little unclear on what exactly you are trying to do. — PSL, Jan 25 '15 at 16:44

score 16 · Answer 1 · edited Aug 03 '18 at 13:00

Try using the Regex and a parameter in the url. It is not optimal but works.

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

More information on regex in Urls.

To generate links with ui-sref pass the same parameter with the state name as a function

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

score 15 · Answer 2 · answered Jan 25 '15 at 17:13

15

You use params:

https://github.com/angular-ui/ui-router/wiki/URL-Routing

.state('site.link',
{
    url: '/{link}'
    ..
}

so when you use the same state like this

$state.go('site.link', {link: 'link1'})
$state.go('site.link', {link: 'link2'})

answered Jan 25 '15 at 17:13

Valter

2,859
5
30
51

1

i'm curious, where did you see such an example in the link you provide ? – mpgn Jan 15 '16 at 15:06
The link show the documentation and it uses contacts.details. I just use this example to show how to change state using "go" function. – Valter Jan 17 '16 at 16:06

score 11 · Answer 3 · edited Aug 31 '17 at 16:55

11

you can used when() function

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

then on root config

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

edited Aug 31 '17 at 16:55

Elliott

2,669
2
23
33

answered May 05 '15 at 07:11

nguyên

5,156
5
43
45

score 4 · Answer 4 · edited May 27 '16 at 19:27

4

I found this approach to be quite simple and clean: create two equal states, just changing the url property

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

edited May 27 '16 at 19:27

Paul Roub

36,322
27
84
93

answered May 27 '16 at 19:14

Ramses

996
4
12
28

Well, isn't this example for two states? Would there be an instance where we can override the state's `url` option? So, at the end, there will be just one state. Thanks. – Anjana Silva Jul 20 '18 at 15:53

score 0 · Answer 5 · answered Nov 01 '15 at 09:29

I had almost the same problem, only with another constraint - I didn't want to use a redirect, since I wanted the url in the browser to stay the same, but display the same state.
This was because I wanted the chrome saved passwords to work for users that already saved the previous url.

In my case I wanted these two urls :
/gilly and
/new/gilly
to both point to the same state.

I solved this by having one state defined for /gilly, and for the second url, I defined an abstract state called /new.

This should be set up like this :

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

AngularJs UI router - one state with multiple URLs

5 Answers5

Linked