角多路由共享一个控制器 [英] angular multiple routes sharing one controller

问题描述

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

I'm not sure if I'm approaching this correctly but I'm building an ecommerce site - part of the site has 6 different product grid pages, each of which can use the same 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>

和同一个控制器：

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

    function($scope, whiskyList, $http){

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

    }

])

但需要在路由提供程序配置中有不同的路由

but need to have a different route in the route provider config i.e. one goes to scotch, one goes to irish, one to japanese etc.

如何对路由进行编码，使不同的页面共享同一个控制器和视图？

How do I code the routing so that the different pages share the same controller and view? Is it maybe possible to pass parameters from the router to the controller?

非常感谢

推荐答案

是的，您可以根据需要重复使用控制器和视图。如果我正确理解你，你想要不同的路由使用相同的控制器和视图？这很容易。此外，当路由被触发时，您想要将变量传递给控制器​​吗？也很容易。下面是一个不使用 ui-router 的示例。

Yes, you can reuse controllers and views as often as you want. If I understand you correctly, you want different routes to use the same controller and view? That's easy. Additionally, you want to be able to pass variables to your controller when the route is triggered? Also easy. Here is an example that does not use 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();
      }
    }
  });
}

显然，这种实现不是干的（Do not Repeat Yourself）。我会重新考虑你的实现。我将更改 whiskeyList.getWhiskeys（）以接受一个参数，告诉它返回的威士忌类型。例如， whiskeyList.getWhiskeys（'scotch'）。

Obviously, this implementation is not DRY (Don't Repeat Yourself). I would rethink your implementation. I would change whiskeyList.getWhiskeys() to accept a parameter that tells it the type of whiskey to return. For example, whiskeyList.getWhiskeys('scotch'). Then, the data you receive in your controller is filtered to only what the view requires.

在路由器的resolve函数中映射的数据在控制器中通过名称进行访问。

The data mapped in the router's resolve function is accessed in the controller by name.

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

这篇关于角多路由共享一个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！