Question

我最近才开始学习ng-resource。我想知道在将常规AngularJS应用程序转换为使用ng-resource的应用程序时，我是否在正确的轨道上。

这是我的旧home.js控制器（不使用ng-resource）：

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，这就是我现在所拥有的。这是我的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' });
});

这是我的控制器（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;
    }
)};

这是我的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;
    }]);

我是否正在将常规AngularJS应用转换为使用ng-resource？对我来说，似乎所需的代码量看起来相同。提前谢谢！

Answer 1

通常，我只有在拥有完整的CRUD Web应用程序时才使用ng-resource。示例将是一种CRM类型的应用程序，您需要创建客户，更新客户，删除客户并显示客户列表。使用ng-resource是有意义的，因为它为您“处理”get，post，put和delete HTTP方法。

但是，在您的示例中，您似乎唯一的操作是“赞”和“获取帖子列表”。如果您仅要使用其中一种HTTP方法，对于每种资源类型，那么我建议您坚持使用BaseService的旧方式。

这件事只需2美分。

Answer 2

我同意@Mark你可能在你的API中没有足够的操作来充分利用$ resource，所以好处并不是那么好。对于你现在拥有的，如果你想使用$ resource，我会这样设置：

mp4_atom_containers

如果你到达每个端点使用多个动作的位置，我会有一个Post和PostLike资源，但在你的情况下，这不是必需的。

在您的控制器中，您将能够像这样使用您的帖子：

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

您可以添加到BaseService的errorHandler方法以消除一些重复。它看起来像这样：

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

如何正确地将控制器和服务从AngularJS转换为使用ng-resource

2 个答案: