¿Las rutas angulares pueden tener valores de parámetros predeterminados?

Question

¿Puedo establecer un valor predeterminado de un parámetro de una ruta en AngularJS? ¿Hay alguna forma de tener /products/123 y /products/ manejados por la misma ruta?

Busco refactorizar mi código existente, que se parece a:

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; 
} 

Funciona, pero no es muy elegante. ¿Hay una mejor manera?

Answer 1

AngularJS no permite valores predeterminados para los parámetros de ruta.

Pero las rutas (en AngularJS) no deberían tener parámetros predeterminados.

Los recursos pueden tener parámetros predeterminados.

Si desea una ruta con un parámetro opcional, estas son en realidad dos rutas diferentes.

¿Por qué?

• Rutas deben ser simples

• rutas no permite expresiones regulares juego de parámetros

• rutas no son algo que expone una API para trabajar en su aplicación (a diferencia de Recursos hacer). Las rutas son solo configuraciones que conectan una URL con una plantilla y un controlador. Por lo tanto, tener más rutas es mejor:

  • Está claro qué ruta se asigna a qué url.

  • Es más prolijo, pero más simple de leer. Tener rutas más complejas crearía una curva de aprendizaje más pronunciada donde AngularJS no necesita una.

A diferencia de los marcos del lado del servidor que tienen rutas

• AngularJS rutas no tienen nombres.
• No construye URL a partir de las rutas definidas.
• No tiene lógica (a.k.a funciones) en las definiciones de rutas.

Rutas más simples = más líneas para definirlas = menos dolores de cabeza trabajando con ellas.

NOTA: Tenga en cuenta que la pregunta y esta respuesta son para una versión anterior de AngularJS (creo que 1.0) antes de la implementación de las nuevas rutas/recursos.

Answer 2

Reconozco que esta pregunta es antigua, pero aún así: ¿por qué no simplemente redirige la URL "vacía" a una que contenga la IdProducto por defecto?

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

Answer 3

Tenía un requisito similar. Lo que hice fue crear una función para resolver. Algo parecido a continuación

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; 
} 

Answer 4

Con url: "/ view /: id /: Estado?", puede indicar un parámetro opcional.

Sólo pensé que alguien podría necesitarlo.

Answer 5

No estoy seguro si esta pregunta es específica para $routeProvider pero en $stateProvider, se puede lograr esto mediante la

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 
       } 
      } 
     }); 
});