Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass client-side parameters to the server-side in Angular/Node.js/Express

Probably a very basic question, but I cannot seem to find a simple answer.

I have a GET method leveraging Angular's $http that is requesting a promise from a particular url (URL_OF_INTEREST).

On this server, I run an express script server.js script that can handle GET requests.

server.js

var express    = require('express');        // call express
var app        = express();                 // define our app using express
var bodyParser = require('body-parser');
var stripe     = require("stripe")("CUSTOM_TEST_TOKEN");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var port = process.env.PORT || 8080;        
var router = express.Router();              // get an instance of the express Router

router.get('/', function(req, res, next) {

    var stripeToken = "CUSTOM_PAYMENT_TOKEN";

    var charge = stripe.charges.create({
        amount: 1100, // amount in cents, again
        currency: "usd",
        source: stripeToken,
        description: "Example charge"
    }, function(err, charge) {
        if (err && err.type === 'StripeCardError') {
            res.json(err);   
        } else {
            res.json(charge);   
        }
    });
});

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    next();
})

app.use('/api', router); // register our route
app.listen(port); // start our server
console.log('Magic happens on port ' + port);

I can communicate with the URL_OF_INTEREST using an Angular GET method as follows:

$http.get('URL_OF_INTEREST')
        .success(
            function(success){
                console.log(success)
            })
        .error(
            function(error){
                console.log(error)
            });

However, the fields amount, currency, source and description need to be ideally passed on from the Angular client side application.

How can this be achieved and how can my express application read this data?

like image 502
JohnAndrews Avatar asked Oct 13 '15 16:10

JohnAndrews


People also ask

Is Express server-side or client-side?

It is useful for building web apps quickly on NodeJS. It is useful for building real-time applications like messaging apps. It can be used both on the client-side and server-side.

Is Angularjs client-side or server-side?

Angular JS is a client side JavaScript framework for data binding. etc.. You can use Node JS for your server side operations along with Angular JS.

Is node js server-side or client-side?

Node. js is an open-source server-side Javascript run-time environment built on Chrome's JavaScript Engine(V8). Node. js is used for building fast and scalable applications and is an event driven, non-blocking I/O model.


2 Answers

You need to pass the data in your get call as folow:

var data = {
    amount: 3,
    currency: 2,
    source: 3,
    description: 4
};

$http.get('URL_OF_INTEREST', data) // PASS THE DATA AS THE SECOND PARAMETER
    .success(
        function(success){
            console.log(success)
        })
    .error(
        function(error){
            console.log(error)
        });

And in your backend, you can get your url parameters as folow:

router.get('/', function(req, res, next) {

    var amount = req.query.amount; // GET THE AMOUNT FROM THE GET REQUEST

    var stripeToken = "CUSTOM_PAYMENT_TOKEN";

    var charge = stripe.charges.create({
        amount: 1100, // amount in cents, again
        currency: "usd",
        source: stripeToken,
        description: "Example charge"
    }, function(err, charge) {
        if (err && err.type === 'StripeCardError') {
            res.json(err);   
        } else {
            res.json(charge);   
        }
    });
});
like image 101
Bruno João Avatar answered Oct 15 '22 18:10

Bruno João


HTTP GET method

Client:

$http.get('/login', {params: {name: 'ABCXYZ'}})
    .success(
        function(success){
            console.log(success)
        })
    .error(
        function(error){
            console.log(error)
        });

Server:

router.get('/login', function(req, res, next) {
    var username = req.query.name;
    res.json({'status': 200, 'msg': 'success'});
}

HTTP POST method

Client:

$http.post('/login', {params: {name: 'ABCXYZ'}})
    .success(
        function(success){
            console.log(success)
        })
    .error(
        function(error){
            console.log(error)
        });

Server:

router.post('/login', function(req, res, next) {
    var username = req.body.params.name;
    res.json({'status': 200, 'msg': 'success'});
}
like image 6
Trung Le Nguyen Nhat Avatar answered Oct 15 '22 18:10

Trung Le Nguyen Nhat