0

So I have setup separate ports for my express server and my angular front end , using yeoman and grunt for the first time. This is also my first time attempting a web project with this client/server structure and I have hit a wall.

I have a signup form in my front end under localhost:9000/signup and when I click submit I get the following back

{firstname: "test", lastname: "test", email: "test", password1: "test", password2: "test"}
angular.js:12759 POST http://localhost:9000/signup 404 (Not Found)

(anonymous) @ angular.js:12759
sendReq @ angular.js:12492
serverRequest @ angular.js:12244
processQueue @ angular.js:17051
(anonymous) @ angular.js:17095
$digest @ angular.js:18233
$apply @ angular.js:18531
(anonymous) @ angular.js:27346
dispatch @ jquery.js:5206
elemData.handle @ jquery.js:5014
angular.js:14700 Possibly unhandled rejection: {"data":"Cannot POST     /signup\n","status":404,"config":
{"method":"POST","transformRequest":        
[null],"transformResponse:[null],"jsonpCallbackParam":"callback","url":"/signup","data":
{"firstname":"test","lastname":"test","email":"test","password1":"test",
"password2":"test"},"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"}}
,"statusText":"Not Found","xhrStatus":"complete"}

The first line is me printing the results of the form back to the browsers console. Second is 404 on /signup and I am not sure if that is the express route or the client /signup?

Here is my signup.js that is located in /routes folder in express

// Include Express
var express = require('express');
// Initialize the Router
var router = express.Router();

// Setup the Route
router.post('/', function (req, res) {

// show the request body in the command line
console.log(req.body);

// return a json response to angular
res.json({
    'msg': 'success!'
});
});

// Expose the module
module.exports = router;

And I have included it in my app.js file in express with

var signup = require('./routes/signup');
...
app.use('/signup', signup);

Abd finally my signup.js folder which is the controller for the /signup form.

'use strict';

angular.module('clientApp') // make sure this is set to whatever it is in your client/scripts/app.js
  .controller('SignupCtrl', function ($scope, $http) { // note the added $http depedency

    // Here we're creating some local references
    // so that we don't have to type $scope every
    // damn time
    var user,
        signup;

    // Here we're creating a scope for our Signup page.
    // This will hold our data and methods for this page.
    $scope.signup = signup = {};

    // In our signup.html, we'll be using the ng-model
    // attribute to populate this object.
    signup.user = user = {};

    // This is our method that will post to our server.
    signup.submit = function () {

      // make sure all fields are filled out...
      // aren't you glad you're not typing out
      // $scope.signup.user.firstname everytime now??
      if (
        !user.firstname ||
        !user.lastname ||
        !user.email ||
        !user.password1 ||
        !user.password2
      ) {
        alert('Please fill out all form fields.');
        return false;
      }

      // make sure the passwords match match
      if (user.password1 !== user.password2) {
        alert('Your passwords must match.');
        return false;
      }

      // Just so we can confirm that the bindings are working
      console.log(user);


    $http.post('/signup', user)
    .then(function(response) {
      console.log(response.data);
  });
}
  });

I am officially stumped and would love some insight - any help is much appreciated.

1
  • on what port is express running? Commented Aug 29, 2017 at 19:49

1 Answer 1

1

The problem is that you are posting to localhost:9000/signup, which is the frontend, but the frontend does not support a post method to that route. You need to send the request to localhost:{YOUR_EXPRESS_SERVER_PORT}/signup.

Change this $http.post('/signup', user) to $http.post('http://localhost:{YOUR_EXPRESS_SERVER_PORT}/signup', user)

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.