REST API. AngularJS to Express. Error 500;

Question

Please help me to figure out the logic behind Express REST API. I am moving my self-education from pure AngularJS to MEAN stack, so please bear with me.

I have the following angular controller, which takes data from my contact form and put it into formData object.

app.controller('ContactCtrl',  ['$scope', '$http', function($scope,  $http){

  $scope.formData = {};
  $scope.submitForm = function() {
    console.log($scope.formData);
    $http.post('/sendEmail', $scope.formData);
  }

}]);

In my routes/index.js file I have the following code to test If It can at least get to this route

router.get('/sendEmail', function(req, res) {
   res.send('hello world');
});

When I submit form I am getting Error 500 from the server.

http://localhost:3000/sendEmail 500 (Internal Server Error)

Can somebody tell me what I am doing fundamentally wrong.

I was trying to find some docs or tutorials for beginners about this topic, but at this point I think I need some interactive human help. Can somebody explain

1. Why I am getting 500 ERROR, why it's not simply rendering "Hello World"
2. How to properly pass $scope.formData to Express and how the res. could look like.

Last question, is a bonus question, you can ignore it if you think it's too much, I still need to dig into nodemailer docs. 3. How to use this $scope.formData object that we passed to Express and use it here with nodemailer API to actually send email.

Thank you all in advance!

I really want to master MEAN, but getting hard times in putting it all together sometimes.

I am asking here, because there is really no "COMPLETE" MEAN stack tutorial on Contact forms. Maybe someone can make one.

Answer 1

When you are sending HTTP requests to the server, you need to declare the action to be performed by the server, which is called as HTTP request methods.

If you want to fetch resources and don't want to have any side-effects on the server, you can use 'GET' method. From the Client side, you need to add this header in your request, fortunately Angular has already wraps all this for us, we only need to call $http.get(). From the server side, you need to declare which methods you allow others (anyone who will access your server) to access. So in Express, if you write below code,

router.get('/sendEmail', function(req, res) {
   res.send('hello world');
});

It means, you allow users to GET resource under directory '/sendEmail' from your server.

In your case, you want to send some data to the server (your express app) and maybe store it in the database, you need to add a 'POST' method in your HEADERs. You can use $http.post('/sendMail', data)... easily in Angular app.

For the express app, you need to define the route as

router.post('/send mail', ... )

to allow others to post data to the server.

Answer 2

If your client side code does a POST request to the backend with the $http.post() method, your server has to listen for POST requests. Your code listens for GET with router.get('/sendEmail'). So you have to change your server code to the following.

router.post('/sendEmail', function (req, res) {
    /* your code */
});

Further readings

You might have a look in the documentation for the express.js API how to handle the different HTTP methods. For sending data to your server with AngularJS, please have a look at the corresponding $http documentation.

I could also recommend spending some time in reading about REST which does mean calling endpoints on your server with specific paths and methods based on the functionality you'd like to achieve. A good read is Best Practices for a Pragmatic Restful API.