HTTP GET not being fired

Question

I'm trying to create a simple messageboard with MongoDB, Angular, NODE.js and Express.

For some reason the first time I call getMessages() everything goes fine. But when I call getMessages() after a postMessage(), no GET request is being send.

These are my Routes:

app.get('/api/message', function(req, res) {
    Message.find({}).exec(function(err, result) {
        res.send(result);
    });
});

app.post('/api/message', function(req, res) {
    console.log(req.body);

     var message = new Message(req.body);
     message.save();

     res.status(200).send('Message added');
})

And this is my angular controller:

(function() {
'use strict';

angular
    .module('app')
    .controller('MainController', mainController);

function mainController(navigationFactory, $http, $timeout, apiFactory, $scope) {

    var that = this; // jshint ignore: line

    function init() {
        that.getMessages();
    }

    that.postMessage = function() {

        apiFactory.postMessage(that.message).then(function() {
            console.log('Posted from controller'); //gets logged
            that.getMessages(); 
        });
        //that.getMessages(); <-- also tried this

    }

    that.getMessages = function() {
        console.log('Getting from controller'); //gets logged
        $http.get('http://localhost:5000/api/message').then(function(result) {
                console.log(result.data); //Logs old result, without new message
                that.messages = result.data;
               console.log('Set data'); //gets logged
        });   
    }

     init();

}
})();

And finally I use a factory to post the message:

factory.postMessage = function(message) {
        return $http.post('http://localhost:5000/api/message', {msg: message});       
 }

I already opened a similar question, but since this has turned out to be a different problem I thought I'll ask it again.

Why is there no HTTP GET Request, even though getMessages() is clearly being called in my postMessage() function. I can see that getMessages() is being called with the help of console.log(), but it seems to return before any request is being sent out.

Answer 1

I think you may be running into a hoisting issue, basically calling a function that hasn't yet been declared. What happens if you try changing the order like this?

var that = this; // jshint ignore: line

that.getMessages = function() {
    console.log('Getting from controller'); //gets logged
    $http.get('http://localhost:5000/api/message').then(function(result) {
            console.log(result.data); //Logs old result, without new message
            that.messages = result.data;
           console.log('Set data'); //gets logged
    });   
}

that.postMessage = function() {

    apiFactory.postMessage(that.message).then(function() {
        console.log('Posted from controller'); //gets logged
        that.getMessages(); 
    });
    //that.getMessages(); <-- also tried this

}

function init() {
    that.getMessages();
}

init();

var functionName = function() {} vs function functionName() {}

EDIT:

I fixed up your plunkr and it seems to be working just fine!

The issue was that you're not injecting $http into your controller... That's why your GET request never happened

https://plnkr.co/edit/NyI1qa63NG8gFfuc45jj?p=preview

Answer 2

I think, issue is at server side promise, Try using this.

app.get('/api/message', function(req, res) {
    return Message.find({}).exec(function(err, result) {
        if(err) {
          return res.status(500).send(err);
        }
        return res.status(200).json(result);
    });
});