为所有CRUD操作使用相同的控制器（Rails相似）

时间：2013-08-25 16:52:52

标签： angularjs crud angularjs-ng-repeat

我有一个角度控制器，可以在创建时获取资源：

angular.module('adminApp')
  .controller('PropertiesCtrl', function ($log, $scope, Property, $location) {
    $scope.properties = Property.query()  
  });

现在我想向控制器添加逻辑，以便能够创建“Property”资源：

angular.module('adminApp')
  .controller('PropertiesCtrl', function ($log, $scope, Property, $location) {
    $scope.properties = Property.query()  
    $scope.create = function(){
      //logic to create
    };
  });

但是，当我在表单上创建“属性”时，会先进行不必要的调用以获取所有属性。我该如何避免这种情况？

潜在的解决方案？

  1. 我可以创建一个单独的控制器，专门用于创建不会获取属性的Property。但是，它可以简化在单个控制器下封装单个资源的所有CRUD操作。
  2. 我可以创建一个函数来获取所有属性。但是，我的索引页面直接使用“属性”。我首先需要获取调用某种方法然后使用数据的数据（不知何故？）

3 个答案:

答案 0 :(得分：16)

我的反应是，听起来你正试图将控制器用作服务，就像你试图将许多功能集成到一个控制器中一样。

所以你应该考虑两件主要的事情。首先，创建控制器非常重要，每个控制器只有一个特定的目的。请注意，这与不与仅使用控制器一次相同，如果您有一个应该出现在多个位置的功能，您会被鼓励在几个不同的地方使用相同的控制器。它只是意味着控制器不应该同时做几件事。

我们以照片库为例。虽然您可以创建一个获取所有照片的控制器，让您添加新照片，并允许您编辑和删除现有照片，这将是一个坏主意。如果您决定添加照片也可以从另一个页面“第X页”完成，该怎么办？如果你在哪里重复使用同一个控制器，那么你也可以从服务器请求库，并为那些你不想在那个页面上设置的东西设置控件。

如果您改为制作一个仅负责获取内容的控制器，另一个用于添加新照片的控制器，另一个用于编辑的控制器等，那么这将很容易。您只需在“Page X”上实现create-controller，您就不必担心意外触发超出您想要的内容。您可以选择在页面上实现所需的功能，并且仅该功能。这也使您的控制器保持小巧，易于阅读和快速编辑/修正，因此这是一个双赢的胜利！

其次，如果您想将所有CRUD资源收集到一个对象中（我也想做），它们不应该在控制器中，它们应该在服务中。所以你有一个PhotoAPI，它暴露了CREATE，READ，UPDATE和DELETE函数。然后您的索引控制器只调用READ函数，您的创建控制器调用CREATE函数等。控制器定义哪些函数和数据可用，但逻辑​​在组合服务中。通过这种方式，您可以聚集资源，使其易于查找，而不会产生组合控制器的问题。

类似于：

app.service('PhotoAPIService', [
function() {
   this.READ = function() {
     // Read logic
   }

  this.CREATE = function() {
     // Create logic
   }
}]);

app.controller('PhotoIndexController', [
'$scope',
'PhotoAPIService',
function($scope, PhotoAPIService) {
   $scope.photos = PhotoAPIService.READ(<data>);
}]);


app.controller('PhotoCreateController', [
'$scope',
'PhotoAPIService',
function($scope, PhotoAPIService) {
   $scope.createPhoto = PhotoAPIService.CREATE;
}]);

答案 1 :(得分：7)

我从你的问题（以及你的SO标签）中看到你想在AngularJS中创建类似Rails的控制器。由于两个框架（Rails和AngularJS）共享一个类似的MVC原则，这实际上很容易实现。

两个框架都允许您指示不同的路由使用同一个控制器。

在Rails中，您通常的index / show / new / edit / destroy方法（操作）是开箱即用的（带有脚手架）。这些default actions映射到不同的，完善的路由和HTTP方法。

Rails中的CRUD / List路由 enter image description here

现在，在AngularJS应用程序（或所有SPA）中，您只需要这些路由的一部分，因为客户端路由只能理解GET请求：

AngularJS中的CRU / List路线 enter image description here

AngularJS本身不提供可为您生成所有CRUD路由的脚手架机制。但是，它为您提供了至少两种使用单个控制器连接CRUD / List路由的方法。

选项1（使用$location.path()）

使用location.path（）方法，您可以根据位置路径构建PhotosCtrl以执行不同的操作。

路线： 

app.config(
  [
    '$routeProvider',
    function ($routeProvider) {

      $routeProvider
        .when('/photos', {
          templateUrl: 'photos/index.html',
          controller: 'PhotosCtrl'
        })
        .when('/photos/new', {
          templateUrl: 'photos/new.html',
          controller: 'PhotosCtrl'
        })
        .when('/photos/:id', {
          templateUrl: 'photos/show.html',
          controller: 'PhotosCtrl'
        })
        .when('/photos/:id/edit', {
          templateUrl: 'photos/edit.html',
          controller: 'PhotosCtrl'
        });

    }
  ]
);

控制器： 

app.controller('PhotosCtrl', [
  '$scope',
  'Photos', // --> Photos $resource with custom '$remove' instance method
  '$location',
  '$routeParams',
  function($scope, Photos, $location, $routeParams){
    if($location.path() === '/photos'){
      // logic for listing photos
      $scope.photos = Photos.query();
    }

    if($location.path() === '/photos/new'){
      // logic for creating a new photo
      $scope.photo = new Photos();
    }

    if(/\/photos\/\d*/.test($location.path())){ // e.g. /photos/44
      // logic for displaying a specific photo
      $scope.photo = Photos.get({id: $routeParams.id});
    }

    if(/\/photos\/\d*\/edit/.test($location.path())){ // e.g. /photos/44/edit
      // logic for editing a specific photo
      $scope.photo = Photos.get({id: $routeParams.id});
    }

    // Method shared between 'show' and 'edit' actions
    $scope.remove = function(){
      $scope.photo.$remove();
    }

    // Method shared between 'new' and 'edit' actions
    $scope.save = function(){
      $scope.photo.$save();
    }

  }
]);

这四个ifs使得控制器看起来有点乱，但是当用一个替换4个不同的控制器时，很少有条件是不可避免的。

选项2（使用resolve属性）

此选项使用路由配置对象的resolve属性为不同的路由生成不同的“操作标识符”。

路线： 

app.config(
  [
    '$routeProvider',
    function ($routeProvider) {

      $routeProvider
        .when('/photos', {
          templateUrl: 'photos/index.html',
          controller: 'PhotosCtrl',
          resolve: {
            action: function(){return 'list';}
          }
        })
        .when('/photos/new', {
          templateUrl: 'photos/new.html',
          controller: 'PhotosCtrl',
          resolve: {
            action: function(){return 'new';}
          }
        })
        .when('/photos/:id', {
          templateUrl: 'photos/show.html',
          controller: 'PhotosCtrl',
          resolve: {
            action: function(){return 'show';}
          }
        })
        .when('/photos/:id/edit', {
          templateUrl: 'photos/edit.html',
          controller: 'PhotosCtrl',
          resolve: {
            action: function(){return 'edit';}
          }
        });

    }
  ]
);

控制器： 

app.controller('PhotosCtrl', [
  '$scope',
  'Photos',
  '$routeParams',
  'action'
  function($scope, Photos, $routeParams, action){
    if(action === 'list'){
      // logic for listing photos
      $scope.photos = Photos.query();
    }

    if(action === 'new'){
      // logic for creating a new photo
      $scope.photo = new Photos();
    }

    if(action === 'show')
      // logic fordisplaying a specfiic photo
      $scope.photo = Photos.get({id: $routeParams.id});
    }

    if(action === 'edit')
      // logic for editing a specfic photo
      $scope.photo = Photos.get({id: $routeParams.id});
    }

    // Method shared between 'show' and 'edit' actions
    $scope.remove = function(){
      $scope.photo.$remove();
    }

    // Method shared between 'new' and 'edit' actions
    $scope.save = function(){
      $scope.photo.$save();
    }

  }
]);

这两种方法都需要在控制器中使用一些条件，但第二种方法至少要读得更清楚，因为在路由机制中解决了确切的操作，这会占用繁忙的控制器的一些逻辑。

当然，在任何实际应用程序中，您可能在控制器内部定义了更多方法，在这种情况下，您的控制器可能会变得非常难以理解。这些示例使用一个简单的$ resource实例（Phones），它依赖于一个简单的RESTfull后端API（Rails？）。 但是，当您的视图逻辑变得复杂时，您可能希望使用Angular服务/工厂来抽象控制器中的一些代码。

答案 2 :(得分：0)

使用相同的资源拥有多个视图（和控制器）很好......这不是一个糟糕的设计。

如果您需要多于1个资源来执行所有CRUD操作，那将是一个问题。

使用您的第一个解决方案。每个视图1个控制器。它是重新组合所有CRUD操作的资源，而不是单个控制器。

相关问题
最新问题