Prependola attributo opzionale nell'URI angolare del router-router

Question

C'è un modo per avere un attributo opzionale all'inizio dell'URL in ui-router? Se é cosi, come?

voglio ottenere sth come questo:

.state('events',{ 
    url: '(/city:)?/events/:id' 
    ... 
}) 

Così "città" sarebbe facoltativa.

Grazie per qualsiasi input.

Answer 1

Probabilmente è una cattiva pratica che due percorsi separati puntino allo stesso stato, ma nulla ti impedisce di creare due stati diversi che utilizzano le stesse risoluzioni/controller/modello.

$stateProvider 
.state('state1', { 
    url: "/:city/events/:id", 
    templateUrl: "partials/events.html", 
    controller: eventsCtrl 
}) 
.state('state2', { 
    url: "/events/:id", 
    templateUrl: "partials/events.html", 
    controller: eventsCtrl 
}); 

function eventsCtrl($scope){ 
    // shared controller 
} 

Ancora una volta, questo è probabilmente una cattiva pratica, ma non riesco a pensare a una soluzione migliore

Answer 2

Non vedo alcuna ragione per cui si wan't farlo in una configurazione ui-router stato standard.

DEMO

JAVASCRIPT

angular.module('app', ['ui.router']) 

    .config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 

     .state('state1', { 
     url: ':city/events/:id', 
     templateUrl: 'partials/events.html', 
     controller: 'EventsController' 
     }) 

     .state('state2', { 
     url: ':abc/cities/:x/:y', 
     templateUrl: 'partials/cities.html', 
     controller: 'CitiesController' 
     }); 

    }) 

    .controller('EventsController', function($scope, $stateParams) { 

    angular.extend($scope, $stateParams); 

    }) 

    .controller('CitiesController', function($scope, $stateParams) { 

    angular.extend($scope, $stateParams); 

    }); 

Answer 3

ho cercato di rispondere il simile (se non uguale) qui:

Angular js - route-ui add default parmeter

C'è un working plunker, risolvendo il problema per a language invece che per un city(ma il concetto è lo stesso)

così, ci sarebbe/dovrebbe introdurre alcuni super stato 'root'.

Nel nostro caso, possiamo anche usare un po 'di espressione regolare i valori limite consentiti - perché sarebbe difficile indovinare che cosa è city e ciò che è events

.state('root', { 
    url: '/{city:(?:Prague|Bristol|Denver)}', 
    abstract: true, 
    template: '<div ui-view=""></div>', 
    params: {lang : { squash : true, value: 'Prague' }} 
}) 

Ciò che è importante qui è l'impostazione params : {}. Dice che il valore predefinito è 'Praga', quindi quella sarebbe la città se nessuna è selezionata. Ciò che è anche importante - dovrebbe essere schiacciato, saltato se c'è una corrispondenza con il valore di parametro 'Praga':

params: {lang : { squash : true, value: 'Prague' }} 

Ora, possiamo introdurre qualche stato annidato (s), che avrebbe dichiarato 'root' come i genitori:

.state('events',{ 
    parent: 'root', 
    url: '/events/:id' 
    ... 
}) 

Controllare l'esempio di lavoro (con un linguaggio al posto di città) here.Per maggiori dettagli vedere l'originale Q & A