angularjs - 对所有 CRUD 操作使用相同的 Controller (类似 Rails)

Question

我有一个 Angular Controller ，它在创建时获取资源:

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

现在我想向 Controller 添加逻辑以便能够创建“属性”资源:

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

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

潜在的解决方案？

我可以创建一个单独的 Controller ，专门用于创建不会获取属性的属性。但是，将单个资源的所有 CRUD 操作封装在单个 Controller 下会更简单。

我可以创建一个函数来获取所有属性。但是，我的索引页直接使用“属性”。我首先需要调用一些方法来获取数据，然后使用数据(不知何故？)

Answer 1

我的 react 是，这听起来像是您尝试将 Controller 用作服务，并且尝试将许多功能放入一个 Controller 中。

因此，您应该考虑两件主要事情。首先，创建每个只有一个特定目的的 Controller 是相当重要的。请注意，这与仅使用一次 Controller 不同，如果您的功能应该出现在多个地方，则鼓励您在多个不同的地方使用相同的 Controller 。这只是意味着 Controller 不应该同时做几件事。

让我们以照片库为例。虽然您可以创建一个 Controller 来获取所有照片、添加新照片以及编辑和删除现有照片，但这不是一个好主意。如果您决定也可以从另一个页面“页面 X”添加照片怎么办？如果您在何处重用相同的 Controller ，那么您还将从服务器请求图库并为您不打算在该页面上的内容设置控件。

如果您改为制作一个仅负责获取内容的 Controller ，一个用于添加新照片的单独 Controller ，另一个用于编辑等，那么这将很容易。您只需在“Page X”上实现 create-controller，您就不必担心意外触发超过您想要的次数。您可以选择在页面上完全实现您想要的功能，并且仅实现该功能。这也使您的 Controller 体积小、易于阅读且易于编辑/修复错误，因此它是双赢的!

其次，如果您想将所有 CRUD 资源收集到一个对象中(我也想这样做)，它们不应该在 Controller 中，而应该在服务中。所以你有一个 PhotoAPI，它公开了 CREATE、READ、UPDATE 和 DELETE 函数。然后你的索引 Controller 只调用 READ 函数，你的创建 Controller 调用 CREATE 函数等等。 Controller 定义了哪些函数和数据在何处可用，但逻辑​​在组合服务中。这样您就可以将您的资源集中起来，以便于找到它们，而不会产生组合 Controller 的问题。

所以像:

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;
}]);