防止 $routeParams 通过代码库流血

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.

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

这就像模态 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?，可以使用$route.current.params:

在$routeProvider的resolve方法中引用当前路由的参数

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

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

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

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

防止 $routeParams 通过代码库流血

Prevent $routeParams from Bleeding Through Codebase

angularjs

angularjs-routing