web-dev-qa-db-fra.com

Les routes angularjs peuvent-elles avoir des valeurs de paramètre par défaut?

Puis-je définir une valeur par défaut d'un paramètre d'une route dans AngularJS? Existe-t-il un moyen d'avoir /products/123 et /products/ géré par le même itinéraire?

Je cherche à refactoriser mon code existant, qui ressemble à:

myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
     when('/products/', {templateUrl: 'products.html', controller: ProductsCtrl}).            
     when('/products/:productId', {templateUrl: 'products.html', controller: ProductsCtrl})
}]);


function ProductsCtrl($scope, $routeParams) {
    $scope.productId = typeof($routeParams.productId) == "undefined" ? 123 : $routeParams.productId;
}

Cela fonctionne, mais ce n'est pas très élégant. Y a-t-il une meilleure façon?

javascriptangularjsmodel-view-controllerurl-routing
32
mikel

AngularJS n'autorise pas les valeurs par défaut pour les paramètres de route.

Mais les routes (dans AngularJS) ne devraient pas avoir de paramètres par défaut.

Les ressources peuvent avoir des paramètres par défaut.

Dans AngularJS si vous voulez une route avec un paramètre facultatif, ce sont en fait deux routes différentes.

Pourquoi?

  • Les itinéraires doivent être simples

  • Les routes ne permettent pas aux expressions régulières de correspondre aux paramètres

  • Les routes ne sont pas quelque chose qui expose une API à fonctionner dans votre application (contrairement aux ressources). Les routes sont simplement une configuration qui relie une URL à un modèle et à un contrôleur. Il est donc préférable d'avoir plus de routes:

    • Il est clair quel itinéraire correspond à quelle URL.

    • Il est plus verbeux, mais plus simple à lire. Avoir des itinéraires plus complexes créerait une courbe d'apprentissage plus abrupte où AngularJS n'en a pas besoin.

Contrairement aux frameworks côté serveur qui ont des routes

  • Les routes AngularJS n'ont pas de nom.
  • Vous ne créez pas d'URL à partir des itinéraires définis.
  • Vous n'avez pas de logique (fonctions a.k.a) dans les définitions de routes.

Itinéraires plus simples = plus de lignes pour les définir = moins de maux de tête en travaillant avec eux.

NOTE : Veuillez garder à l'esprit la question et cette réponse concerne une ancienne version d'AngularJS (1.0 je pense) antérieure à la nouvelle implémentation des routes/ressources.

24
Haralan Dobrev

Je reconnais que cette question est ancienne, mais quand même: pourquoi ne redirigez-vous pas simplement l'URL "vide" vers une URL contenant le productId par défaut?

myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
     when('/products/', {redirectTo: '/products/123'}).
     when('/products/:productId', {templateUrl: 'products.html', controller: ProductsCtrl})
}]);
35
Juliane Holzt

J'avais une exigence similaire. J'ai créé une fonction à résoudre. Quelque chose comme ci-dessous

myModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.
 when('/products/', resolveProduct()).            
 when('/products/:productId', resolveProduct())
}]);


function ProductsCtrl($scope, $routeParams) {
$scope.productId = $routeParams.productId;
}

function resolveProduct() {
   var routeConfig = {
      templateUrl: 'products.html', 
      controller: ProductsCtrl,
      resolve: {
         productId: ['$route', function($route){
            var params = $route.current.params;
            params.productId =  params.productId || 123;
         }]
      }
   }

   return routeConfig;
}
6
Bren

Avec rl: "/ view /: id /: status?", vous pouvez indiquer un paramètre facultatif.

Je pensais juste que quelqu'un en aurait besoin.

3
PAVITRA

Je ne sais pas si cette question est spécifique à $routeProvider mais dans $ stateProvider , vous pouvez y parvenir en

myApp.config(function($stateProvider) {

    $stateProvider
        .state('products', {
            url: '/:productId',
            templateUrl: "/dashboard/products.html",
            controller: 'ProductController',
            params: {
                productId: {
                  value: "defaultValue",
                  squash: true // or enable this instead to squash `productId` when empty
                } 
            }
        });
});
1
tsuz