How do I process responses from express with angular? - angularjs

Question

This is for a project for college. I am having difficulty understanding how to handle express responses with angular. My partner handled most of the back end and I took care of most of the front end, as to how to get information from express and use it on the front end. Our routing is below, if it will help.
// set variables for environment
var express = require('express');
var app = express();
var path = require('path');
var bodyParser = require('body-parser');
//tell express to use the bodyParser middleware
app.use(bodyParser());
//start the mysql interface
var mysql = require('mysql');
var mysql = require('mysql');
var connectionPool = mysql.createPool({
host : 'localhost',
user : '<user>',
password : '<password>',
database : '<table>'
});
// connection.connect();
// connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
// if (err) throw err;
// console.log('The solution is: ', rows[0].solution);
// });
// connection.end();
// Set server port
app.listen(80);
console.log('server is running at 127.0.0.1:80');
// views as directory for all template files
app.set('views', path.join(__dirname, 'views'));
// instruct express to server up static assets
app.use(express.static('public'));
// set routes
app.get('/', function(req, res) {
res.sendFile(__dirname + '/views/index.html');
});
app.get('/:file', function(req, res) {
res.sendFile(__dirname + '/views/' + req.params.file);
});
app.get('/req/:itemname', function(req,res)
{
connectionPool.getConnection(function(err, connection)
{
if(err)
{
console.log('connection error: \n\n\n');
console.log(err);
res.statusCode = 503;
res.send({
result: 'error',
err: err.code
});
}
else
{
var query = 'SELECT * FROM Product WHERE name LIKE \'%' + req.params.itemname +'%\' ORDER BY ProductID asc';
console.log(query);
connection.query(query, req.params.id, function(err, rows, fields)
{
if(err)
{
console.log(err);
res.statusCode = 500;
res.send({
result: 'error',
err: err.code
});
}
else
{
res.send({
result: 'success',
err: '',
fields: fields,
json: rows,
length: rows.length
});
}
});
connection.release();
}
});
// connection.destroy();
});
app.post('/login/', function(req,res)
{
//debug for routes to make sure everything is working properly
console.log('I am in the login post route');
//connect to SQL pool
connectionPool.getConnection(function(err, connection)
{
if(err)
{
console.log('connection error: \n\n\n');
console.log(err);
res.statusCode = 503;
res.send({
result: 'error, having issue connecting to MYSQL DB instance',
err: err.code
});
}
else
{
var user = req.body.email;
user = user.toUpperCase();
var password = req.body.password;
console.log('user: ' + user);
console.log('password: ' + password);
var query = 'select COUNT(*) AS recordCount, isStaff from userTable where email = \''+user+'\' AND password = \''+password+'\'';
console.log(query);
connection.query(query, req.params.id, function(err, rows, fields)
{
if(err)
{
//another connection issue
console.log('in 500 error box')
console.log(err);
res.statusCode = 500;
res.send({
result: 'error',
err: err.code
});
}
else
{
//if the query was successful, we check to see if their exists a record of this query
//debug print count of records that match parameters
// console.log(rows[0].recordCount)
//if the return query has a user that has admin privileges, redirect them to the admin page
console.log(rows[0].isStaff);
if(rows[0].recordCount >=1 && rows[0].isStaff == 1)
{
console.log('at least one staff record')
res.sendFile(__dirname + '/views/admin.html')
// next();
}
else if(rows[0].recordCount >=1 && rows[0].isStaff == 0)
{
console.log('at least one nonstaff record')
res.sendFile(__dirname + '/views/customer.html')
// next();
}
else
{
console.log('invalid login')
console.log('in 503 error box, invalid user')
res.statusCode = 503;
res.send({
statuscode: '503',
result: 'E-mail or Password is incorrect',
});
}
}
});
connection.release();
}
});
});
Near the bottom of the code we specifically would like to handle the case when we have a login error. Right now it just sends back {{ statuscode: 503, result: 'E-mail or Password is incorrect'}} on a blank page.
On the front end a modal is displayed requesting sign in information. On success it redirects to a different page. On failure we would like to tell the front end to leave the modal on the page open and post an alert message in the body of the modal.
Please help.
Edit: The purpose of the project is working with the database. The project requires a web based app as the interface and since our next course requires using the MEAN stack we decided to go ahead and start learning a bit on our own.

Answer 1

In your $http call on the frontend, simply pass in a second argument as you error handling callback. The $http service will run that function any time the server sends back an error status.
https://docs.angularjs.org/api/ng/service/$http
$http.get('api/route')
.then(function successCallback(response) {
loginSuccessRedirect();
}, function errorCallback(response) {
handleLoginError();
});