Wie man Controller und Service von AngularJS korrekt in ng-resource umwandelt

Question

Ich habe erst kürzlich begonnen, ng-resource zu lernen. Ich frage mich, ob ich auf dem richtigen Weg bin, wenn es darum geht, meine normale AngularJS-Anwendung in eine zu konvertieren, die ng-resource verwendet.

Dies ist meine alte home.js Controller (ohne ng-Ressource zu verwenden):

angular.module("HomeApp", ["BaseApp"]) 
    .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) { 

     var self = this; 

     BaseService.fetch.posts(function() { 
      self.posts = BaseService.posts; 
      self.cerrorMessages = BaseService.cerrorMessages; 
     }); 

     self.like = function(id, postType) { 
      BaseService.like(id, postType, function() { 
       self.cerrorMessages = BaseService.cerrorMessages; 
      }); 
     }; 
    }]); 

Und das ist meine alte base.js (BaseService):

angular.module("BaseApp", []) 
    .factory("BaseService", ["$http", "$window", function($http, $window) { 
     var self = this; 
     self.posts = []; 
     self.cerrorMessages = []; 
     self.accessErrors = function(data) { 
      self.cerrorMessages = []; 
      for (prop in data) { 
       if (data.hasOwnProperty(prop)){ 
        self.cerrorMessages.push(data[prop]); 
       } 
      } 
     }; 

     self.fetch = { 
      posts: function(callback) { 
       $http.get('/posts/') 
       .then(function(response) { 
        self.posts = response.data; 
        callback(); 
       }, function(response) { 
        self.accessErrors(response.data); 
        callback(); 
       }); 
      } 
     }; 

     self.like = function(id, postType, callback) { 
      $http.post("/" + postType + "/" + id + "/like/") 
      .then(function(response) { 
       angular.forEach(self.posts, function(post, index, obj) { 
        if (post.id == id) { 
         post.usersVoted.push('voted'); 
         post.voted=true; 
        }; 
       }); 
      }, function(response) { 
       self.accessErrors(response.data); 
       callback(); 
      }); 
     }; 

     return self; 
    }]); 

Ich wurde gesagt, dass ich kann von großem Nutzen von der Verwendung von ng-Ressourcen, da ich ein RESTful-Backend habe. Ich habe versucht, den obigen Code zu konvertieren, um mit ng-resource zu beginnen, und das ist es, was ich jetzt habe. Das ist mein resources.js:

angular.module('PostsResources', ['ngResource']) 

.factory('PostsFactory', function($resource) { 
    return $resource('/posts/:postId', { postId:'@id' }); 
}); 

.factory('PostLikeFactory', function($resource) { 
    return $resource('/posts/:postId/like', { postId:'@id' }); 
}); 

Und das ist mein Controller (home.js):

angular.module("HomePageApp", ["BaseApp", "PostsApp"]) 
    .controller("MainCtrl", ["$http", "$window", "BaseService", "PostsResource", "PostLikeResource", function($http, $window, BaseService, PostsResource, PostLikeResource) { 

var self = this; 

function loadPosts() { 
    self.posts = PostsFactory.query(function(data) {}, 
     function(error) { 
      BaseService.accessErrors(error.data); 
      self.cerrorMessages = BaseService.cerrorMessages; 
     } 
    ); 
}; 

self.like = function likePost() { 
    PostLikeFactory.save(function(data) { 
     angular.forEach(self.posts, function(post, index, obj) { 
      if (post.id == id) { 
       post.usersVoted.push('voted'); 
       post.voted=true; 
      }; 
     }); 
    }, function(error) { 
     BaseService.accessErrors(error.data); 
     self.cerrorMessages = BaseService.cerrorMessages; 
    } 
)}; 

Und das ist mein BaseService (base.js):

angular.module("BaseApp", []) 
    .factory("BaseService", ["$http", "$window", function($http, $window) { 
     var self = this; 
     self.posts = []; 
     self.cerrorMessages = []; 
     self.accessErrors = function(data) { 
      self.cerrorMessages = []; 
      for (prop in data) { 
       if (data.hasOwnProperty(prop)){ 
        self.cerrorMessages.push(data[prop]); 
       } 
      } 
     }; 
     return self; 
    }]); 

Bin ich auf dem richtigen Weg Konvertieren einer regulären AngularJS-App in ng-resource? Für mich sieht es so aus, als ob die Menge an Code gleich aussieht. Danke im Voraus!

Answer 1

Ich stimme @Mark zu, dass Sie wahrscheinlich nicht genügend Operationen in Ihrer API haben, um die Ressource $ vollständig zu nutzen, so dass die Vorteile nicht so groß sind. obwohl jetzt, was Sie haben, wenn Sie wollen, $ Ressource zu nutzen, würde ich es eingestellt wie auf den Punkt:

angular.module('PostsResources', ['ngResource']) 
    .factory('Post', function($resource) { 
     return $resource('/posts/:postId', { postId:'@id' }, { 
     like: { 
      url: '/posts/:postId/like', 
      method: 'POST', 
      params: { postId:'@id' } 
     } 
     }) 
    }); 

Wenn Sie bekommen, wo Sie verwenden mehr als eine Aktion pro Endpunkt, würde ich haben Sie eine Post und PostLike Ressource, aber in Ihrem Fall ist das nicht notwendig.

In Ihrem Controller, werden Sie in der Lage sein, mit Ihren Beiträgen wie dies funktioniert:

self.posts = Post.query(null, BaseService.errorHandler(self)); 

self.like = function(post) { 
    post.$like(function() { 
     angular.forEach(self.posts, function(post, index, obj) { 
      if (post.id == id) { 
       post.usersVoted.push('voted'); 
       post.voted=true; 
      }; 
     }); 
    }, BaseService.errorHandler(self)); 
}; 

Die Fehler Handler Methode Sie Ihre BaseService loszuwerden einige Überschneidungen hinzufügen könnten. Es würde in etwa so aussehen:

Answer 2

Im Allgemeinen verwende ich nur ng-Ressource, wenn ich komplette CRUD Web-Anwendungen habe. Beispiel wäre eine CRM-Art von App, in der Sie Kunden erstellen, Kunden aktualisieren, Kunden löschen und eine Kundenliste anzeigen müssen. Es ist sinnvoll, ng-resource zu verwenden, da es die HTTP-Methoden get, post, put und delete für Sie "handhabt".

In Ihrem Beispiel scheint es jedoch, als ob die einzigen Aktionen, die Sie haben, "Gefällt mir" und "Eine Liste von Posts bekommen" sind. Wenn Sie ONLY gehen, um eine der HTTP-Methoden für jeden Ressourcentyp zu verwenden, dann würde ich vorschlagen, nur an Ihrem alten Weg der Verwendung der BaseService zu bleiben.

Nur meine 2 Cent zu diesem Thema.