angularjs路由可以有默认参数值吗？答案

【问题标题】：Can angularjs routes have default parameter values?angularjs路由可以有默认参数值吗？
【发布时间】：2012-09-13 12:32:06
【问题描述】：

我可以在 AngularJS 中设置路由参数的默认值吗？有没有办法让/products/123 和/products/ 由同一条路线处理？

我希望重构我现有的代码，如下所示：

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

它有效，但它不是很优雅。有没有更好的办法？

【问题讨论】：

不熟悉angularJS，但是var param ={templateUrl: 'products.html', controller: ProductsCtrl}; $routeProvider.when('/products/', param).when('/products/:productId', param)呢？
您可以通过以下方式简化控制器代码： $scope.productId = $routeParams.productId || 123;
@Gloopy 如果 productId == 0 不是有效的 id，这当然可以工作
谢谢大家，这确实使它有点短。只是默认参数是否可以使用的问题...... ;)
别忘了ProductsCtrl.$inject = ['$scope', '$routeParams'];。

标签： javascript angularjs model-view-controller url-routing

【解决方案1】：

我知道这个问题很老，但仍然：为什么不直接将“空” URL 重定向到包含默认 productId 的 URL？

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

【讨论】：

方法重载 FTW！

【解决方案2】：

AngularJS 不允许路由参数使用默认值。

但是路由（AngularJS）不应该有默认参数。

资源可以有默认参数。

在AngularJS中，如果你想要一个带有可选参数的路由，这实际上是两个不同的路由。

为什么？

路线应该简单
路由不允许正则表达式匹配参数
路由不是暴露 API 以在您的应用程序中工作的东西（与资源不同）。路由只是将 URL 与模板和控制器连接起来的配置。因此拥有更多路线会更好：
- 哪个路由映射到哪个url一目了然。
- 它更冗长，但更易于阅读。拥有更复杂的路线会产生更陡峭的学习曲线，而 AngularJS 不需要。

与具有路由的服务器端框架不同

AngularJS 路由没有名称。
您不会从定义的路由构建 URL。
您在路由定义中没有逻辑（也称为函数）。

更简单的路线 = 更多行来定义它们 = 减少使用它们的麻烦。

注意：请记住这个问题和这个答案是针对旧版本的 AngularJS（我认为是 1.0）早于新的路由/资源实现。

【讨论】：

虽然这可能是正确的答案，但我在这里没有看到任何强烈的论据可以阻止 AngularJS 具有默认参数或更好的路由匹配。重复相同的代码始终是维护问题。
@edA-qamort-ora-y 我的观点是，在 AngularJS 路由的当前状态下（可能会改变）路由应该保持简单。
虽然这个对话有点过时了，但我听说在 Angular 2 版本中将支持路由的模式匹配，这可能还包括一些可选或默认参数的方法。
@shaunhusain 是的，这很可能会改变。但是新的 AngularJS 路由和所有改变了问题和答案的许多前提条件。
可选路线现在可用stackoverflow.com/questions/17510962/…

【解决方案3】：

我也有类似的要求。我所做的是创建一个函数来解决。如下所示

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

【讨论】：

【解决方案4】：

用url:"/view/:id/:status?"，可以指明可选参数。

只是觉得有人可能需要它。

【讨论】：

【解决方案5】：

不确定这个问题是否特定于$routeProvider，但在$stateProvider，您可以通过

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

【讨论】：