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 t

Answer 1

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

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

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)