角度控制器架构

Question

所以我正在尝试以 DRY 方式构建一个简单的 Angular 控制器。

基本上一个有两个视图。一个是#/items 另一个是#/archiveditems

除了一个页面显示已归档项目的列表，另一个页面显示当前项目之外，这些页面是相同的。还有一个<h2>，看起来像<h2>{{itemState}} Items</h2>

我有一个 Angular Factory 设置，它返回一个看起来像 {items: $resource(/api/items), archivedTtems: $resource(/api/archiveditems)} 的对象

目前我有两个独立的控制器。两者的代码几乎相同。唯一的区别是 $scope.itemState 和 Api.archivedItems.query() 与 Api.items.query()

这是控制器的详细外观。

app.controller('currentItemsController', function($scope, Api){

    $scope.itemState = 'Current';

    $scope.items = Api.items.query(function () {

});

app.controller('archivedItemsController', function($scope, Api){

    $scope.itemState = 'Archived';

    $scope.items = Api.archivedItems.query(function () {

});

我认为有一种优雅的方式可以将这两个控制器合并为一个。任何帮助将不胜感激！

Answer 1

你可以为 /items/:type 设置路由

然后在控制器中类似：

app.controller('itemsController', function($scope, Api, $routeParams){

    var isArchive = $routeParams.type == 'archived';
    $scope.itemState = isArchive ? 'Archived' : 'Current';
    $scope.items = Api[isArchive ? 'items' : 'archivedItems'].query(function () { ... });

});

那么当您调用 /items/archived 时 - 它会处理您的归档项目 .. 如果您的 API 返回相同的内容 - 为什么不只传递一个标志“isArchived”而不是拥有一个单独的资源？