Question

我可以在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;
}

它有效，但不是很优雅。还有更好的方法吗？

Answer 1

我知道这个问题已经过时了，但仍然存在：为什么不将“空”网址重定向到包含默认productId的网址？

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

Answer 2

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

但路线（AngularJS）不应包含默认参数。

资源可以有默认参数。

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

<强>为什么吗

路线应该很简单
路由不允许正则表达式匹配参数
路由不是暴露API在您的应用程序中工作的东西（与Resources不同）。路由只是将URL与模板和控制器连接起来的配置。因此，拥有更多路线更好：
- 很清楚哪条路线映射到哪个网址。
- 它更详细，但更容易阅读。拥有更复杂的路线会在AngularJS不需要的情况下创建更陡峭的学习曲线。

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

不同

AngularJS路线没有名称。
您不会根据定义的路线构建网址。
路线定义中没有逻辑（a.k.a函数）。

更简单的路线=更多的线来定义它们=减少使用它们的头痛。

注意：请记住这个问题，这个答案是针对新版本的AngularJS（我认为是1.0）在新路线/资源实施之前进行的。

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

Answer 4

使用 url：＆＃34; / view /：id /：status？＆＃34; ，您可以指明一个可选参数。

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

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

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

5 个答案: