Question

我正在使用Angular $ routeProvider服务来连接我的单页HTML5应用程序。我使用以下路由配置：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/show-order/:orderId', {
        templateUrl: 'templates/order.html',
        controller: 'ShowOrdersController'
      });
  }]);

在ShowOrdersController内我需要访问上面描述的RESTful URL参数:orderId。建议为了最好地实现这一点，我应该在我的控制器中使用$routeParams服务：

app.controller('ShowOrderController', function($scope, $routeParams) {
  $scope.order_id = $routeParams.orderId; 
});

我对严重有疑虑。我的路由逻辑现已渗透到我的控制器！如果我想彻底改变路由方案，我将不得不浏览所有控制器代码并更正$routeParams的所有引用。

此外，如果我想为多个路由重用ShowOrderController，它将强制所有路由使用相同的令牌变量:orderId。

这对我来说似乎很糟糕。提供一些链接机制会更有意义，因此路由器可以为控制器指定众所周知的参数。

这就像模态resolve方法的工作方式一样：

$modal.open({
  controller: 'ShowOrderController',
  resolve: {
    orderId: function () {
      return $routeParams.orderId;
    }
  }
});

app.controller("ShowOrderController", ["orderId", function (orderId, $scope) {
  $scope.orderId = orderId;
}]);

有没有办法通过开箱即用的AngularJS路由服务实现这一点或类似的东西？

Answer 1

根据AngularJS - How to pass up to date $routeParams to resolve?，可以使用resolve在$routeProvider的{{1}}方法中引用当前路线的参数：

$route.current.params

这将遵循上面的建议，即控制器可以声明性地指定其参数：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/show-order/:orderId', {
        templateUrl: 'templates/order.html',
        controller: 'ShowOrdersController',
        resolve: {
          orderId: function( $route ) {
            return $route.current.params.orderId;
          }
        }
      });
  }]);

结合起来，这有效地将控制器与路线的参数分离。

防止$ routeParams通过代码库流血

1 个答案: