I am using angular to send data to node server but it is not working. I am not able to see my post data(input values in form) in my node post method. I need to get that data save in mongoDb but I don't know why I can't see the POST values sent by the front-end.
I am not able to see my form data in node via console.log(). Sometimes it returns {} and sometimes POST is recognised as OPTIONS req by 'morgan' debugger when I use
console.log(req.body.fname);
My Html :
<body ng-app="app" ng-controller="MyController">
<div id="login-page" class="row">
<div class="col s12 z-depth-6 card-panel">
<form ng-submit="postData();">
<div class="row" style="height: 90px;background-color:#00BFA5;margin: -12px -12px 15px -12px">
<h3 class="center-align">Register</h3>
</div>
<div class="row margin">
<div class="input-field col s12">
<i class="mdi-social-person prefix"></i>
<input id="fname" name="fname" ng-model="formData.fname" type="text" class="validate">
<label for="fname" class="center-align">First Name</label>
</div>
</div>
<div class="row margin">
<div class="input-field col s12">
<i class="mdi-social-person-outline prefix"></i>
<input id="lname" name="lname" ng-model="formData.lname" type="text" class="validate">
<label for="lname" class="center-align">Last Name</label>
</div>
</div>
<div class="row margin">
<div class="input-field col s12">
<i class="mdi-action-account-circle prefix"></i>
<input id="username" type="text" name="formData.username" ng-model="username" class="validate">
<label for="username" class="center-align">Username</label>
</div>
</div>
<div class="row margin">
<div class="input-field col s12">
<i class="mdi-communication-email prefix"></i>
<input id="email" type="email" class="validate" name="email" ng-model="formData.email">
<label for="email" class="center-align">Email</label>
</div>
</div>
<div class="row margin">
<div class="input-field col s12">
<i class="mdi-action-lock prefix"></i>
<input id="password" type="password" class="validate" name="password" ng-model="formData.password">
<label for="password">Password</label>
</div>
</div>
<div class="row margin">
<div class="input-field col s12">
<i class="mdi-action-lock-outline prefix"></i>
<input id="password-again" type="password" name="pass_again">
<label for="password-again">Re-type password</label>
</div>
</div>
<div class="row">
<button class="btn waves-effect waves-light validate col s6 push-s3"
style="margin-top: 15px;"
type="submit">Submit
<i class="material-icons right">send</i>
</button>
<div class="input-field col s12">
<p class="margin center medium-small sign-up">Already have an account? <a
href="login.html">Login</a></p>
</div>
</div>
</form>
{{ServerResponse}}
</div>
</div>
<script type="text/javascript" src="js/angular_min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="js/materialize.min.js"></script>
<script>
angular.module('app', []).controller('MyController', function ($scope, $http) {
$scope.postData = function () {
$http.post('http://localhost:3000/api/post', $scope.formData)
.success(function (data) {
$scope.ServerResponse = data;
}).error(function (data) {
$scope.ServerResponse = data;
})
}
})
</script>
</body>
My node code:
require('rootpath')();
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var morgan = require('morgan');
var mongoose = require('mongoose');
var jwt = require('jsonwebtoken');
var config = require('config.json');
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
var port = process.env.PORT || 3000;
mongoose.connect(config.connectionString);
app.set('superSecret', config.secret);
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(morgan('dev'));
app.post('/api/post', function (req, res) {
console.log(req.body.fname);
});
app.listen(port);
console.log('Magic happens at http://localhost:' + port);
Thanks.
