risolvi ui-router con parametri dinamici

Question

Questo è probabilmente semplice ma non riesco a trovare nulla nei documenti e googling non aiuta. Sto cercando di definire uno stato in $stateProvider dove l'URL che devo colpire sul server per estrarre i dati necessari dipende da un parametro URL di stato. In breve, qualcosa del tipo:

.state('recipes.category', { 
    url: '/:cat', 
    templateUrl: '/partials/recipes.category.html', 
    controller: 'RecipesCategoryCtrl', 
    resolve: { 
     category: function($http) { 
     return $http.get('/recipes/' + cat) 
      .then(function(data) { return data.data; }); 
     } 
    } 
    }) 

Quanto sopra non funziona. Ho provato a iniettare $routeParams per ottenere il parametro necessario cat, senza fortuna. Qual è il modo giusto per farlo?

Answer 1

Eri vicino allo $routeParams. Se si utilizza ui-router, utilizzare invece $stateParams. Questo codice funziona per me:

.state('recipes.category', { 
    url: '/:cat', 
    templateUrl: '/partials/recipes.category.html', 
    controller: 'RecipesCategoryCtrl', 
    resolve: { 
     category: ['$http','$stateParams', function($http, $stateParams) { 
      return $http.get('/recipes/' + $stateParams.cat) 
        .then(function(data) { return data.data; }); 
     }] 
    } 
}) 

Answer 2

Per coloro che utilizzano ui-router 1.0 $stateParamsis deprecated, si dovrebbe usare $transition$ oggetto invece:

.state('recipes.category', { 
 
    url: '/:cat', 
 
    templateUrl: '/partials/recipes.category.html', 
 
    controller: 'RecipesCategoryCtrl', 
 
    resolve: { 
 
     category: ['$http','$transition$', function($http, $transition$) { 
 
      return $http.get('/recipes/' + $transition$.params().cat) 
 
        .then(function(data) { return data.data; }); 
 
     }] 
 
    } 
 
})