web-dev-qa-db-fra.com

Routeur AngularJs UI - un état avec plusieurs URL

J'ai une demande pour ajouter un autre paramètre d'URL qui dirige vers un état que j'ai déjà configuré. Pour des raisons d'efficacité, j'essaie de voir si je peux ajouter plusieurs URL pour pointer vers le même état, ou dois-je simplement utiliser la méthode $ UrlRouterProvider.when () pour rediriger vers cet état dans ce nouveau cas.

Ex. c'est ce qui existe déjà

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

et la demande consiste à ajouter www.site.com/newlink qui pointe vers la page link1. Y a-t-il quelque chose comme ça;

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

Essayez d'utiliser le Regex et un paramètre dans l'url. Ce n'est pas optimal mais ça marche.

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

Plus d'informations sur l'expression régulière dans les URL .

Pour générer des liens avec ui-sref passe le même paramètre avec le nom de l'état en tant que fonction

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

Vous utilisez des paramètres:

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

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

donc quand vous utilisez le même état comme celui-ci

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

vous pouvez utiliser la fonction when()

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

puis sur root config

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

J'ai trouvé cette approche assez simple et propre: créez deux états égaux, en changeant simplement la propriété url

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

J'ai eu presque le même problème, mais avec une autre contrainte - je ne voulais pas utiliser de redirection, car je voulais que l'URL dans le navigateur reste la même, mais affiche le même état.
C'est parce que je voulais que les mots de passe enregistrés chrome fonctionnent pour les utilisateurs qui ont déjà enregistré l'URL précédente.

Dans mon cas, je voulais ces deux URL:
/gilly et
/new/gilly
pour pointer vers le même état.

J'ai résolu cela en ayant un état défini pour /gilly, et pour la deuxième URL, j'ai défini un état abstrait appelé /new.

Cela devrait être configuré comme ceci:

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