Angular how to send get request to node

Question

I have a node server running at port 8000

app.get('/historical/:days' ,(req,res,next){..})

How do I make a a request from angular(port 4200) from the browser to the node server? I do the following

makeRequest(): void { this.loading = true; this.http.get('http://localhost:8000/historical/:day') .subscribe(data => { this.data = data; console.log(this.data) this.loading = false; });

}

at the html side of angular:

<pre> <div> {{makeRequest()}} </div> </pre>

When I type http://localhost:4200/historical/1, (where 1 represents historical data of the previous day) nothing happens

What to do?

Is your angular router navigating to the correct path after you change the address? — Brad
– Brad, Commented Jan 18, 2018 at 6:11

LLai · Accepted Answer · 2018-01-17 22:41:37Z

1

For one I would not call the makeRequest function from your html. Angular is going to fire this method every time the change detection cycle runs (alot of api requests). Instead I would include it in your ngOnInit lifecycle hook

ngOnInit(){ this.makeRequest(); }

Since your node server is running on localhost:8000, then

this.http.get('http://localhost:8000/historical/1').subscribe(...);

should work. If you want to hit localhost:4200 for an api request, you are going to need to proxy your api calls from localhost:4200 to localhost:8000. Angular CLI proxy docs

answered Jan 17, 2018 at 22:41

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Steve Over a year ago

It solved some of the problems. But now when I type http://localhost:4200/historical/4 or http://localhost:4200/historical/2 It does not show the data for day 4 or day 2 resp. but instrad shows me the latest data. Whereas if I type the same for node server http://localhost:8000/historical/4, it shows the correct data

LLai Over a year ago

@Steve what do you mean by latest data?

Steve Over a year ago

On hindsight, a question came into my mind. Why do I even need node to serve data from a DB to angular? Why can't I directly request (query) data from DB in angular (skipping the request to node, which then the node server makes request to DB and then give data to angular.

LLai Over a year ago

@Steve There are a couple of issues with that. 1: directly querying the db from angular requires you to expose your database credentials on the client which is a huge security risk. (There are some exceptions like firebase where this is the case, but the db is locked down by rules). 2: The chain has to be angular -> node -> db -> node -> angular. You can't do angular -> db -> node -> angular because if angular makes the request to the db, the db wants to respond to angular. It does not and won't know to respond to node because node did not make the request.

Steve Over a year ago

Thank you for elucidating and helping me to understand the general web app architecture. You are awesome! Are there any other reasons( apart from security) for which the rigor is to make calls angular -> node -> db -> node -> angular, instead (removing node in the picture) angular -> db -> angular

|

Collectives™ on Stack Overflow

Angular how to send get request to node

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related