Using same controller for all CRUD operations (Rails-alike)

Question

I have an angular controller that fetches a resource on creation:

angular.module(\'adminApp\')
  .controller(\'PropertiesCtrl\', function ($log, $scope, Pro         


        

Answer 1

My reaction is that it sounds like you are trying to use a controller as a service, and like you are trying to put to many features into one controller.

So there are two main things you should think about. First of all it is fairly important create controller that only have one specific purpose each. Note that this is not the same thing as using the controller only once, you are encuraged to use the same controller in several different places if you have a feature that should appear in more than one place. It just means that the controller shouldn't be doing several things at once.

Let's take a photo gallery as an example. While you could create one controller that gets all the photos, lets you add new photos, and lets you edit and delete existing photos all in one, this would be a bad idea. What if you decide that adding a photo can also be done from another page, "Page X"? If you where to reuse the same controller then you would also be requesting the gallery from the server and setting up controls for things you don't intend to be on that page.

If you instead made one controller that is only responsible for getting the content, a separate controller for adding new photos, another one for editing, etc, then it would be easy. You would just implement the create-controller on "Page X" and you don't have to worry about accidentaly triggering more than you wanted. You can choose to implement exactly the feature you want on a page and only that feature. This also keeps your controllers small, easy to read and quick to edit/bugfix, so it's a win/win!

Secondly, if you want to gather all your CRUD resources into one object (which I would also want to do), they should not be in a controller, they should be in a service. So you have one PhotoAPI which exposes CREATE, READ, UPDATE, and DELETE functions. Then your index controller just calls the READ function, your create controller the CREATE function etc. The controllers define what functions and data are available where, but the logic is in the combined service. That way you can clump your resources to make them easy to find, without creating the problems with having a combined controller.

So something like:

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


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