AngularJSからng-resourceを使ってコントローラとサービスを正しく変換する方法

Question

最近ng-resourceの学習が始まりました。私は、通常のAngularJSアプリケーションをng-resourceを使用するアプリケーションに変換するときに正しい方向にいるかどうか疑問に思っています。

これは（NG-リソースを使用せずに）私の古いhome.jsコントローラです：

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

そして、これは私の古い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; 
    }]); 

私は、私は大いに利益を得ることができることを言われました私はRESTfulなバックエンドを持っているので、ng-resourcesを使用することはできません。上記のコードをng-resourceを使用して変換しようとしましたが、これが私の現在のものです。

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

は、右のトラックに私をアム：

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

そして、これは私のコントローラ（home.js）である：これは私のresources.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; 
    } 
)}; 

そして、これは私のBaseService（base.js）であります通常のAngularJSアプリをng-resourceに変換する私には、必要なコードの量が同じように見えるようです。前もって感謝します！

Answer 1

私は@マークに同意します。これはおそらく、$ resourceを十分に活用するためにあなたのAPIに十分な操作がないため、そのメリットはそれほど大きくありません。あなたは$リソースを使用することを希望している場合あなたがが今持っているものについては、私はこのようにそれを設定します：あなたはエンドポイントごとに複数のアクションを使用している場所に出た場合

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

、私は希望PostとPostLikeのリソースを持っていますが、あなたの場合、それは必要ではありません。お使いのコントローラで

、あなたはこのようなあなたの投稿で作業できるようになります：

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

あなたには、いくつかの重複を取り除くためにあなたのBaseServiceに追加することができErrorHandlerの方法。これは次のようになります：

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

Answer 2

一般的に、完全なCRUD Webアプリケーションがある場合は、ng-resourceだけを使用します。例としては、顧客を作成し、顧客を更新し、顧客を削除し、顧客のリストを表示する必要がある、CRMの種類のアプリです。 get、post、put、deleteのHTTPメソッドを "処理"するng-resourceを使用すると意味があります。

しかし、あなたの例では、「好き」と「投稿のリストを取得する」という唯一のアクションがあるようです。 の場合のいずれかのHTTPメソッドを使用する場合は、リソースタイプごとに、BaseServiceを使用する古い方法に固執することをおすすめします。

この問題についてはちょうど2セントです。