angularjs - 共享一个 Controller 的 Angular 多条路线

Question

我不确定我的做法是否正确，但我正在构建一个电子商务网站 - 该网站的一部分有 6 个不同的产品网格页面，每个页面都可以使用相同的 View :

<ul class="products row">
    <li class="product thumbnail col-1 grid" ng-repeat="whisky in whiskies | orderBy: sort">
        <p class="picture">
            <a ng-href="#/json/{{whisky.id}}"><img ng-src="images/scotch/{{whisky.imageUrl}}" alt="{{whisky.name}}"/></a>
        </p>
        <div class="desc">
            <h2>{{whisky.name}}</h2>
            <p class="price"><span>&pound;{{whisky.price}}</span></p>
        </div>
        <div class="actions">    
        <button class="add-to-basket btn btn-primary btn-medium fa fa-shopping-cart" data-item='{"imageUrl" : "{{whisky.imageUrl}}", "price" : "{{whisky.price}}", "startPrice" : "{{whisky.price}}", "name" : "{{whisky.name}}", "totalItems" : "{{1}}"}' ng-click="updateMiniBasket($event)"></button>    
        </div>
    </li>
</ul>

和相同的 Controller :

whiskyControllers.controller('whiskyListCtrlr', ['$scope', 'whiskyList', '$http', 

    function($scope, whiskyList, $http){

        whiskyList.getWhiskies().then(function(d) {
            $scope.whiskies = d.data;
        })

    }

])

但需要在路由提供者配置中有不同的路由，即一条去苏格兰，一条去爱尔兰，一条去日本等。

如何对路由进行编码，以便不同的页面共享相同的 Controller 和 View ？是否可以将参数从路由器传递到 Controller ？

非常感谢

Answer 1

是的，您可以根据需要多次重复使用 Controller 和 View 。如果我理解正确的话，您希望不同的路线使用相同的 Controller 和 View ？这很容易。此外，您希望能够在触发路由时将变量传递到 Controller 吗？也容易。这是一个不使用 ui-router 的示例。

angular.module('myApp').config(['$routeProvider', 'whiskeyList', appConfig]); 

function appConfig($routeProvider, wiskeyList) {
  $routeProvider
  .when('/scotch', {
    controller: 'whiskeyListCtrlr',
    resolve: {
      data: function(whiskeyList) {
        return whiskeyList.getWhiskeys();
      }
    }
  })
  .when('/irish', {
    controller: 'whiskeyListCtrlr',
    resolve: {
      data: function(whiskeyList) {
        return whiskeyList.getWhiskeys();
      }
    }
  });
}

显然，这个实现不是 DRY(Don't Repeat Yourself)。我会重新考虑你的实现。我会更改whiskeyList.getWhiskeys()以接受一个参数，该参数告诉它要返回的威士忌类型。例如，whiskeyList.getWhiskeys('scotch')。然后，您在 Controller 中收到的数据将被过滤为仅显示 View 所需的数据。

Controller 中通过名称访问路由器解析函数中映射的数据。

whiskyControllers.controller('whiskyListCtrlr', ['$scope', 'data', function ($scope, data) {
  $scope.whiskeys = data;
});