Mit selben controller für alle CRUD-Operationen (Schienen-alike)

Sehe ich von deiner Frage (und von Ihr SO tags), die Sie möchten, erstellen Sie eine Rails-artige Controller in AngularJS. Da beide frameworks (Rails und AngularJS) einen ähnlichen MVC-Prinzip ist eigentlich Recht einfach zu bewerkstelligen.

Beide frameworks erlauben Sie anweisen, die verschiedenen Routen zu den gleichen controller verwenden.

In Schienen, Ihre üblichen index/show/neu/Bearbeiten/löschen-Methoden (Aktionen) sind out of the box (mit Gerüst). Diese Standard-Aktionen zugeordnet sind, die verschiedene, gut etablierte Routen und HTTP-Methoden.

CRUD/Liste Routen in Rails

Nun, in AngularJS-Anwendungen (oder alle SPAs für diese Angelegenheit), müssen Sie nur einen Teil dieser Routen, weil client-side routing versteht nur GET-Anfragen:

CRU/Liste Routen in AngularJS

AngularJS nativ nicht ein scaffolding-Mechanismus generieren würden alle Ihre CRUD-Routen für Sie. Aber trotzdem bietet Sie mit mindestens zwei verschiedenen Arten der Verkabelung bis Ihre CRUD/Liste Strecken mit einem einzigen controller.

Option 1 ( $location.path() )

Mit Standort.Pfad () - Methode können Sie die Struktur Ihrer PhotosCtrl zu tun verschiedene Dinge, je nachdem, gut Pfad.

Routen:

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

    }
  ]
);

Controller:

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

  }
]);

Diese vier ifs macht der controller sieht etwas unübersichtlich aus, aber beim ersetzen von 4 unterschiedlichen Controllern mit ein, paar Konditionen unvermeidlich sind.

Option 2 (Mit beheben Eigentum)

Diese option bedient sich die resolveEigenschaft der route-Konfiguration-Objekt, um verschiedene 'Aktion identifier " für die verschiedenen Strecken.

Routen:

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

    }
  ]
);

Controller:

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

  }
]);

Beide Methoden erfordern die Verwendung einiger Bedingungen in Ihrem controller, aber die zweite Methode ist zumindest ein wenig klarer zu Lesen, da die genaue Handlung ist behoben, innerhalb des routing-Mechanismus, der braucht etwas Logik aus Ihrem anstrengenden controller.

Natürlich in jedem real-Welt-Anwendung, die Sie haben wahrscheinlich viele weitere Methoden definiert, die in der Steuerung, in welchem Fall Sie Ihre Steuerung ganz unlesbar. Diese Beispiele verwenden eine einfache $Ressource-Instanz ( Phones ), die basiert auf einem einfachen Erholsamen backend-API (Rails?).
Aber, wenn die view-Logik wird komplexer, werden Sie wahrscheinlich wollen, zu beschäftigen Winkel-Dienstleistungen/Fabriken, um zu abstrahieren, einige der code im Controller.