AngularJs router UI - uno stato con più URL

Question

ho una richiesta per aggiungere un altro parametro URL che indirizza ad uno stato che ho già impostato. Per motivi di efficienza, sto cercando di vedere se posso aggiungere più URL a punto allo stesso stato, o devo solo usare il metodo $ UrlRouterProvider.when() per reindirizzare a quello stato in questo nuovo caso.

Es. questo è ciò che già esiste

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

e la richiesta è quella di aggiungere www.site.com/newlink che punta alla pagina collegamento1. C'è qualcosa di simile?

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

Answer 1

si utilizza params:

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

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

in modo che quando si utilizza lo stesso stato come questo

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

Answer 2

è possibile utilizzare la funzione when()

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

poi config radice

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

Answer 3

ho avuto quasi lo stesso problema, solo con un altro vincolo - non volevo usare un redirect, dato che volevo l'URL nel browser per rimanere lo stesso, ma visualizza lo stesso stato.
Questo perché volevo che il cromo password salvate a lavorare per gli utenti che già hanno salvato l'url precedente.

Nel mio caso ho voluto queste due URL:
/gilly e
/new/gilly
sia punto allo stesso stato.

Ho risolto il problema definendo uno stato per /gilly e per il secondo URL, ho definito uno stato astratto chiamato /new.

Questo dovrebbe essere impostato in questo modo:

$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 4

provare a utilizzare il Regex e un parametro nell'URL. Non è ottimale ma funziona.

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

ulteriori informazioni su espressioni regolari negli URL http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.type:UrlMatcher

Per generare legami con ui-sref passare lo stesso parametro con il nome dello stato in funzione

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

Answer 5

Ho trovato questo approccio ad essere abbastanza semplice e pulito: creare due stati uguali, cambiando solo il url proprietà

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