Question

我不确定我是否正确接近这个但我正在建立一个电子商务网站 - 该网站的一部分有6个不同的产品网格页面，每个网页都可以使用相同的视图：

<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" : "whiskyControllers.controller('whiskyListCtrlr', ['$scope', 'whiskyList', '$http', 

    function($scope, whiskyList, $http){

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

    }

])
"}' ng-click="updateMiniBasket($event)"></button>    
        </div>
    </li>
</ul>

和同一个控制器：

{{1}}

但需要在路线提供者配置中使用不同的路线，即一个去苏格兰威士忌，一个去爱尔兰语，一个去日语等。

如何对路由进行编码，以便不同的页面共享同一个控制器和视图？是否可以将参数从路由器传递到控制器？

非常感谢

Answer 1

是的，您可以根据需要重复使用控制器和视图。如果我理解正确，您希望不同的路由使用相同的控制器和视图？这很简单。此外，您希望能够在触发路径时将变量传递给控制器吗？也很容易。这是一个不使用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();
      }
    }
  });
}

显然，这种实施不是干（不要重复自己）。我会重新考虑你的实施。我会更改whiskeyList.getWhiskeys()以接受一个参数，告诉它返回的威士忌类型。例如，whiskeyList.getWhiskeys('scotch')。然后，您在控制器中收到的数据将仅过滤到视图所需的数据。

路由器解析功能中映射的数据在控制器中按名称访问。

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

Answer 2

使用ui-router非常容易，与角度内置路由相比，它提供了许多优势。 Ui Router允许您通过指定模板和控制器来封装状态，并且＆＃34;解决＆＃34;数据（基于路线或其他参数）然后可以传递到控制器中。像下面这样的东西适合你：

angular.module('whiskyApp')
    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
        .state('whiskyList', {

             // whisky-type is a catch all here - can be 'irish', 'japanese', anything.
             // can also use regex to restrict it a bit
             url: '/lists/:whiskyType',
             templateUrl: 'whisky-list-template.html',
             controller: 'whiskyListCtrl',

             // this is what gets passed to the controller
             resolve: {
                 type: ['$stateParams', function($stateParams) {

                     // pass the whisky type from the url into the controller
                     return $stateParams.whiskyType;
                 }],
                 list: ['$stateParams', 'whiskyList', function($stateParams, whiskyList) {

                     // we can also go ahead and pass in the resolved list - this is best practice
                     return whiskyList.getWhiskies();
                 }]
             }
        });
    }]);

]);

然后在你的控制器中，只需注入＆＃39; resolve＆＃39;地图使用它们：

whiskyControllers.controller('whiskyListCtrlr', ['$scope', 'list', 'type' '$http', 

    function($scope, list, type, $http){
       $scope.whiskies = list;
       $scope.type = type;
    }
])

角度多条路线共享一个控制器

2 个答案: