MEAN stack issue with posting form data - node.js

Question

Evening All,
I'm trying to build a simple register page with mongodb, node, express, mongoose and angularJS.
I'm struggling to understand the relationship between all of the components and how to wire them all together.
This is my form...
<div class="main">
<p class="sign" align="center">Register</p>
<form class="form1">
<input class="un " type="email" align="center" placeholder="Email" name="username" required>
<input class="pass" type="password" align="center" placeholder="Password" name="password" required>
<button type="submit" class="btn btn-danger" align="center" ng-click="submit()">Register</button>
</div>
My controller for that view...
angular.module('registerCtrl', [])
.controller('registerController', function ($scope, $http, dataService) {
$scope.submit= function(){
console.log('clicked submit');
$http.post('/RegisterUser').then(function(response){
console.log(response.data);
console.log(response.status)
})
}
});
server.js for server and db logic...
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
const router = express.Router();
mongoose.connect("mongodb://localhost:27017/userDB", { useNewUrlParser: true });
const userSchema = new mongoose.Schema({
email: String,
password: String
});
const User = new mongoose.model("User", userSchema);
app.use(bodyParser.urlencoded({
extended: true
}))
app.use(express.static('node_modules'));
app.use(express.static('public'));
const port = 3000;
app.listen(port);
console.log('Server is running on port 3000');
//POSTS
app.post("/RegisterUser", function (req, res) {
const newUser = new User({
email: req.body.username,
password: req.body.password
});
newUser.save();
})
view routes...
angular.module('app.routes', [])
.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/Login.html"
})
.when("/Register", {
templateUrl: "views/Register.html",
controller: "registerController"
})
.when("/Home", {
templateUrl: "views/Home.html",
controller: "homeController"
})
.when("/CocktailDetails", {
templateUrl: "views/CocktailDetails.html",
controller: "cocktailDetailsController"
})
.when("/Favourites", {
templateUrl: "views/Favourites.html",
controller: "favouritesController"
})
.otherwise({
redirectTo: "/"
})
})
Essentially what I want to achieve is simply posting the inputted email and password to the database and then, if the POST was successful divert the view route to my home view.
Should I be passing in the data from the form into the post request in my controller as opposed to the server side? As currently the post data is being passed as null.
Is someone able to explain the best way to achieve this and describe the relationship between the database, server and client side framework in this scenario.
Thanks

Answer 1

Client
It looks like your form is missing ng-models and you're also not posting their data. Add ng-model to the inputs:
<input type="email" ng-model="form.username">
<input type="password" ng-model="form.password">
Also create their bindings in the controller. Then pass the form data along to the server when you post:
.controller('registerController', function ($scope, $http, $location, dataService) {
// injecting $location now ^
$scope.form = { // <-- An object whose properties are bound to the form inputs
username: '',
password: ''
}
$scope.submit = function(){
console.log('clicked submit');
$http.post('/RegisterUser', $scope.form) // <-- posting `$scope.form` data now
.then(function(response){
console.log(response.data);
console.log(response.status);
$location.path('/Home'); // <-- redirecting to Home route
})
}
});
Server
Since there was no data being posted before, req.body was empty on the server. The server is also not sending back a response. If you wanted to send back the user object, you could add this to the server route after newUser.save():
return res.status(200).send(newUser);
send is what sends a response, return just exits the function.