Send data with an Angular service through HTTP with a promise and async await.
- [Instructor] Let's begin by creating an app.post. So let's go over to line 12 and just copy the entire app.get and we'll paste it below. And we'll change app.get on line 16 to app.post and it will have a message endpoint location since it will just be taking in a single message. So I'll modify messages to message. As a test, we can console log the request.body.
Now to test this we could create a service in Angular, but there is a quicker way with a Chrome app called Postman. And if you haven't installed Postman yet, you can go to the web store and install that. Let's populate the correct URL so that will be localhost:1234 and the endpoint is message. Make sure you have POST selected instead of GET. Then let's go over to the body tab. Select raw, then JSON.
And then let's create a JSON test object. So I've created one here with the following text of "test" and the owner "Ben". Let's go ahead and press send. And now, let's go back into our backend. Let's open up our terminal, and we can see we are getting something console logged but it's currently undefined. In order for express to make sense of the body we are trying to output, we need something called a body parser.
Let's go ahead and install that. So I'll open up a new terminal by hitting plus, and now let's install it with npm install --save body-parser. Then let's require it in. So let's go to the top of our file. After line 2 I'll add a new line. And I'll save it into bodyParser.
Next, just like we set up our middleware for cores, we'll set up yet another middleware. But this time instead of creating our own custom middleware, we'll use bodyParser's middleware. So to do that, we'll add another app.use above our original, and I'll simply pass in bodyParser.json. Letting express know that what we receive in our body should be in JSON. Let's give us that one more try, but first let's go over to our first terminal.
Let's go back to Postman and hit send. And instally you can see we received our JSON object. Notice though that Postman just hangs, and we never actually get a response from our request. So let's send the response back to solve that. So let's scroll down to line 18 of our app.post and after our console log let's add a new line and call response.sendStatus and we'll pass in 200 for okay.
Let's save that and give it one more try with Postman. So I'll hit send, and you can see it's no longer hanging anymore. And if I maximize Postman, we can even see the response as OK. Now that we are able to receive a JSON object, we can pass along our message. Next, let's look into saving that message.
Updated
4/4/2019Released
5/16/2017- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Duration
Views
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.
Share this video
Embed this video
Video: Create a post service