Promise not returning to controller in Angular

Question

I am injecting $q into a factory in order to handle all related methods and callbacks from server. I have a method to add data to mongoDB database, is working all fine I receive the positive answer and I resolve the promise but is not returning back to the controller

In the controller:

    $scope.addArticle = function(){

    console.log('add article route working');
    ArticleService.addArticle($scope.article.title, $scope.article.content, $scope.article.url)

    .then(function(){
      refresh(); // here is where I am expecting it to return
    }
    .catch(function(){
      $scope.error = true;
      $scope.errorMessage = "Something went wrong!";
      $scope.article = {};
    }));
  }

$scope.remove = function(id){
    ArticleService.deleteArticle(id)
    .then(function(){
      refresh();
    });
  }

In the factory

myApp.factory('ArticleService',
['$q', '$timeout', '$http', 
function($q, $timeout, $http){

    var article = null;

    return({
        addArticle : addArticle,
        getArticles : getArticles,
        deleteArticle : deleteArticle

    });

    function addArticle(title, content, imgUrl){
        var date = getDatetime();

        var deferred = $q.defer();

        var article = {
            title : title,
            content : content, 
            imgUrl : imgUrl,
            date
        }

        $http.post('user/edit/addArticle', article)

        .then(function(response){
            if(response.status === 200){
                deferred.resolve();
            }
        });

        return deferred.promise;


    }

    function getArticles(){

        var deferred = $q.defer();

        $http.get('user/edit/getArticles')
        .then(function(result){
            deferred.resolve(result.data);
            /* article = result.data;
            return article; */
        }, function(error){

        });

        return deferred.promise;
    }

    function deleteArticle(id){

        var deferred = $q.defer();

        $http.delete('user/edit/deleteArticle/' + id)
        .then(function(response){
            if(response.status === 200){
                deferred.resolve();
            }
        })

        return deferred.promise;
    }

    function getDatetime() {
        return (new Date);
      };

}]);

Delete article is returning the promise to the controller in exactly the same way as I am doing with the add article, why is not having the same behaviour? Thanks in advance..

Answer 1

Your code is perfect but have some syntax issue.

Correct sequence like this:

$http.get(url)
    .then(function(response) {
        // response body
    }).catch(function(e) {
        // catch block
    }).finally(function() {
        //finally block
    });

Below your code syntactically corrected:

.then(function () {
    refresh(); // here is where I am expecting it to return
})
.catch(function () {
    $scope.error = true;
    $scope.errorMessage = "Something went wrong!";
    $scope.article = {};
});

Answer 2

$http by default send the response as promise. No need to create a new promise using defer instance. Just return the http call.

 function addArticle(title, content, imgUrl){
        var date = getDatetime();  
        var article = {
            title : title,
            content : content, 
            imgUrl : imgUrl,
            date
        } 
        return $http.post('user/edit/addArticle', article);
    }

Then in the controller catch the data.

ArticleService.addArticle($scope.article.title, $scope.article.content, $scope.article.url)    
    .then(function(response){
      console.log(response.data)
      refresh(); // here is where I am expecting it to return
    }