Angular2: How to send data from client to server when making request

Question

There is form and a button on client side, I want to send data that user typed in the form, to the server, where there is request handler that save data to the database, and from database to the client.

How can i do this I'm confused about the logic, I think there is use of body parser, also what is the role of headers, request option in that case, I found that solution but I'm not implementing blindly, I just want to do it my way after understanding

At the client side:

let headers: Headers = new Headers();
headers.append('Content-Type', 'application/json');
let opts: RequestOptions = new RequestOptions();
opts.headers = headers;
this.http.post(
    'http://localhost:3000/addStudent',
    JSON.stringify(obj),
    opts
).subscribe((res: Response) => {
    console.log(res.json())
    setTimeout(() => {
        this.students = res.json();
    }, 3000)
})   

At the server side:

app.post('/addStudent',function(req,res) {
var newStudent = new StudentModel(req.body);
console.log(req.body);
newStudent.save();
StudentModel.find(function(err,data) {
   if(err) res.send(err) 
   else res.json(data)
})

Answer 1

Well your question is related to HTTP i.e exchange of data from the client and server side both. so doing same first you have to need to add http file in the index.html file like this:

<script src="node_modules/angular2/bundles/http.dev.js"></script>

and you have to add HTTP_PROVIDERS whether at the tie of bootstrap or in the providers list.

so now come to RequestOptions, Headers etc. firstly import these as required from here...

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

Role of Header:

Basically Header is used to append Content-Type or some kind of confidential data like username,Password ,which we want to send to the server. we have body part too which is also used to send data to server. for example:

this.headers = new Headers();
    this.headers.append("Content-Type", 'application/json');
    this.headers.append("Authorization", 'confidential data or   
    something like that')

RequestOptions :

Bascially RequestOptions is the collection of some properts like method (GET,POST,PUT....), url or path to json file etc, Headers body part and more. we can add different optipon as per need. for example here is the example of using RequestOptions.

this.requestoptions = new RequestOptions({
                method: RequestMethod.Post,
                url: "url path....",
                headers: this.headers,
                body: JSON.stringify(data)
            });

here is some best tutorials i had found for the same. hope this may helps you.

@Pardeep.

http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/

https://angular.io/docs/js/latest/api/http/Request-class.html