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

Posted 2023-02-19

【中文标题】angularjs路由可以有默认参数值吗？

【英文标题】：Can angularjs routes have default parameter values?

【发布时间】：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'];。

【参考方案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 路由和所有改变了问题和答案的许多前提条件。

可选路线现在可用***.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
                 
            
        );
);