Come convertire correttamente il controller e il servizio da AngularJS all'utilizzo di ng-resource

Question

Ho iniziato a imparare recentemente la risorsa ng. Mi chiedo se sono sulla strada giusta quando si tratta di convertire la mia normale applicazione AngularJS in una che usa ng-resource.

Questo è il mio vecchio home.js controllore (senza utilizzare ng-risorse):

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

E questo è il mio vecchio 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; 
    }]); 

mi è stato detto che mi possono trarre grandi vantaggi dall'utilizzo di ng-resources poiché ho un backend RESTful. Ho provato a convertire il codice qui sopra per iniziare a utilizzare ng-resource, e questo è quello che ho ora. Questo è il mio 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' }); 
}); 

E questo è il mio 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; 
    } 
)}; 

E questo è il mio 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; 
    }]); 

Sono sulla strada giusta di convertire una normale app AngularJS nell'utilizzo di ng-resource? A me sembra che la quantità di codice richiesta sia la stessa. Grazie in anticipo!

Answer 1

Sono d'accordo con @Mark che probabilmente non hai abbastanza operazioni nella tua API per sfruttare appieno la risorsa $, quindi i benefici non sono così grandi. Per quello che hai ora, però, se hai intenzione di usare $ risorsa, vorrei configurarlo in questo modo:

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

Se si arriva al punto in cui si sta utilizzando più di un'azione per ogni endpoint, lo farei avere una risorsa Post e PostLike, ma nel tuo caso non è necessario.

Nel vostro controller, sarete in grado di lavorare con i tuoi post in questo modo:

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

Il metodo errorHandler si potrebbe aggiungere al vostro BaseService sbarazzarsi di alcuni doppioni. Assomiglierebbe a questo:

self.errorHandler = function(viewModel) { 
    return function(error) { 
     BaseService.accessErrors(error.data); 
     viewModel.cerrorMessages = BaseService.cerrorMessages; 
    }; 
}; 

Answer 2

In genere, utilizzo solo ng-resource quando ho applicazioni Web CRUD complete. Esempio sarebbe un tipo di app CRM, in cui è necessario creare clienti, aggiornare i clienti, eliminare i clienti e mostrare un elenco di clienti. È logico utilizzare ng-resource poiché "gestisce" i metodi get, post, put e delete per te.

Tuttavia, nel tuo esempio, sembra che le uniche azioni che hai sono "Mi piace" e "Ottenere un elenco di messaggi". Se si utilizza lo SOLO per utilizzare uno dei metodi HTTP, per ciascun tipo di risorsa, suggerirei semplicemente di attenersi al vecchio modo di utilizzare lo BaseService.

Solo i miei 2 centesimi su questo argomento.