javascript - AngularJS 中的 DRY

Question

我有 8 个 Controller ，使用 12 个常用功能。但每个都有3-4个功能不同。我怎么能不在每一个方面重复自己呢？我正在使用每个 Controller 通用的服务。我的代码:

app.controller("ArticleController",['$scope','$http','dataService',function($scope,$http,dataService){

$scope.comments={};
$scope.articles = {articles:[]};
$scope.reachedEnd = false;
$scope.getArticles //implemented differently for each of the controllers
//Here it is used to fetch latest articles
/* common 12 functions 
   to deal with dom events. On addition of new comments, upvotes, etc
*/
function getArticlesSuccess(articles){
    articles.articles.forEach(function(article){
        $scope.articles.articles.push(article);
    });
    $scope.reachedEnd = articles.reachedEnd;
}

$scope.addToReadingList = function(id,userid){
    dataService.addToReadingList(id,userid);
};

$scope.removeFromReadingList = function(id,userid){
    dataService.removeFromReadingList(id,userid);
};

$scope.upvote = function(id,userid){
    upvoteIncrementer(id,userid);
    dataService.upvote(id);
};

$scope.deleteComment = function(commentId){
    dataService.deleteComment(commentId);
};

var upvoteIncrementer = function(id,userid){
    console.log(id);
    $scope.articles.articles.forEach(function(article){
        console.log(article);
        if(article && article._id === id && !article.votes.set){
            if(article.votes.down.indexOf(userid)>-1){
                article.votes.down.splice(article.votes.down.indexOf(userid));
                console.log('removed vote');
            }
            article.votes.up.push(userid);
            article.votes.set = true;
        }
    });
}


$scope.downvote = function(id,userid){
    downvoteIncrementer(id,userid);
    dataService.downvote(id);
}

var downvoteIncrementer = function(id,userid){
    console.log(id);
    $scope.articles.articles.forEach(function(article){
        console.log(article);
        if(article && article._id === id && !article.votes.set){
            console.log(article);
            if(userid in article.votes.up){
                article.votes.up.splice(article.votes.up.indexOf(userid));
                console.log('removed vote');
            }
            article.votes.down.push(userid);
            article.votes.set = true;
        }
    });
}


$scope.showComments = function(id){
    dataService.getComments(id).then(function(data){
        $scope.articles.articles.forEach(function(article){
            if(article._id === id ){
                article.fetchedComments = data.comments;
            }
        });
        console.log($scope.fetchedComments);
    });
}

$scope.commentForm = function(id,user,contents) {
    dataService.postComments(id,user,contents).then(function(x){
    $scope.articles.articles.forEach(function(article){
            if(article._id === id ){
                article.fetchedComments.push(x);
                console.log(article.fetchedComments);
            }
        });
    });
}
}]);

另一个 Controller 的代码:

app.controller("ArticleController",['$scope','$http','dataService',function($scope,$http,dataService){
$scope.comments={};
$scope.articles = {articles:[]};
$scope.reachedEnd = false;
$scope.getArticles //implemented differently for each of the controllers
//Here it is used to fetch top articles by the day
/* common 12 functions */
}]);

编辑:添加了 dataservice.js

(function(){

angular.module('newstalk')
    .factory('dataService',['$http','$q',dataService]);

function dataService($http,$q){
    return {
        getArticles : getArticles,
        postComments : postComments,
        addToReadingList : addToReadingList,
        getReadingList : getReadingList,
        upvote : upvote,
        downvote : downvote,
        getComments : getComments,
        removeFromReadingList : removeFromReadingList,
        deleteComment : deleteComment
    };

    function getArticles(numsRecieved){
        return $http({
            method:'get',
            url:'/api/articles/'+parseInt(numsRecieved/10)
        })
        .then(sendResponse);
    }

    function deleteComment(commentId){
        $http.delete('/api/delete/comment/'+commentId)
            .then(function(response){console.log(response);});
    }

    function sendResponse(response){
            return response.data;
    }

    function sendResponseComments(response){
            return response.data;
    }

    function postComments(id,user,contents){
        var uid = user._id;
        var uname=user.name;
        var c =  contents;
        var data = {
            content: c,
            id: uid,
            name:uname
        };
        console.log(data);
        return $http.post('/api/article/'+id,data).then(sendResponse);
    }
    function addToReadingList(id,userid){
        var data = {
            id: id,
            user: userid
        };
        $http.post('/api/user/add/'+userid,data);   
    }

    function removeFromReadingList(id,userid){
        var data = {
            id: id,
            user: userid
        };
        $http.post('/api/user/rem/'+userid,data);   
    }

    function getReadingList(userid){
        console.log('/api/readinglist/0');
        return $http({
            method:'get',
            url:'/api/readinglist/0'
        })
        .then(sendResponse);
    }           
    function upvote(id){
        return $http({
            method:'post',
            url:'/api/article/up/'+id
        });
    }
    function downvote(id){
        return $http({
            method:'post',
            url:'/api/article/down/'+id
        });
    }
    function getComments(id){
        return $http({
            method:'get',
            url:'/api/article/comments/'+id
        })
        .then(sendResponseComments);
    }

}
})()

请建议一种方法，以便我可以减少代码并且只需要在一个区域进行更改即可在所有地方生效。

Answer 1

您可以将函数用作服务，并让该函数返回一个对象，其中包含您需要在 Controller 之间重用的函数。您可以在每个 Controller 中调用该函数，并根据您使用的 Controller 传递参数来配置函数。

app.factory('myStuff', function($http) {
  return function(urlForController) {
    return {
      foo: function() {
        // use the parameters in your functions
        return $http.get(urlForController);
      },
      bar: //etc
    };
  };
});

app.controller('myCtrl', function($scope, myStuff) {
  // call the service function, passing in the controller specific parameters to configure the returned object
  $scope.myStuff = myStuff('/whatever');
});

您甚至可以将 Controller 的 $scope 传递到服务中，并让这些函数根据需要对其进行操作。

$scope.myStuff = mystuff($scope, '/whatever');

// the service:
return function(scope, urlForController) {