Join Alexander Zanfir for an in-depth discussion in this video Update Angular service to post to API, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Narrator] In this video, we'll get our front end, to communicate with our back end post question end point. The first thing we'll do is get the URL. So let's hit play, and we can copy that from the browser. Let's copy the URL, and then go back to our front end. Inside our front end project, let's open up our apiservice.ts And on line ten, let's paste in our URL. Then we'll update values to questions.
So now that we've updated our URL, next let's go to our question component. And instead of console logging our question, we'll call our api service post question. But first we'll need reference to it so let's create a constructor. And we'll need to import it.
And of course, we'll need to register it with our app module. So I'll copy the import, paste it at the top on line 8. And then in our providers list on line 23, we'll add api service. Then let's set the body of our constructor. And now on line 13, let's call this.api.postquestion and we'll pass in our question.
Let's save that and give it a try. As we can see in our console in the browser we're getting an error. No provider for http client. So we'll need to add the http client module, to our app module. Let's go back and open up app module. At the top below line two, I'll add import httpclientmodule. And I'll import it from @angular/common/http.
And then let's add it to our imports and I'll add that below browser module. Let's save that and give it another try. Now we can see we're no longer getting errors. And before we head post, make sure your back end's running. We're getting several errors. From our back end we're getting no access control allow origin header is present on the request resource. But, we're also getting unsupported media type. Let's go back to our front end.
Then we can close out our app module, and inside our api service, we can see that we're simply passing question to our back end. And question is just a string at this point. And since our back end expects Jason, we're going to get that unsupported media type error just like we did with postman. So what we'll need to do is create an object and pass that along instead of just a raw string. So inside our question component class, at the top above constructor, I'll create a question.
And this will be an object of that class, with type any. Then let's load our question component HTML. And instead of setting ngModel to question, we'll set it to question.text That way we're creating a text property as part of this question object. Then back in our question component on line ten, we'll just initialize that to an empty object. Let's save that and give it a try. I'll put in a question value, and hit post.
And we're no longer seeing the unsupported media type error, but we're still seeing the access control allow origin error. And this is a Cors error, or cross origin resource sharing error. We get this when our URL from the client differs from the back end. And by default there might be some security concerns with having different URLs. You might think that they're both local hosts so they both should be the same URL. But since the port is different, it still counts as a different address.
To fix that, we'll have to enable Cors on the back end, so let's go to our back end project. We'll stop it, and then let's open up our startup.cs Let's go down to the configure services section. That's on line 24. Above services.AddMvc, we'll add a new line, and add services.AddCors and we'll need to set up some options.
So we'll use options.AddPolicy We'll add a Cors policy, called Cors. And we'll pass in a parameter called builder. And in here we'll use builder.AllowAnyOrigin .AllowAnyMethod .AllowAnyHeader Then let's go down to our configure function on line 37.
And below the if condition, let's add app.UseCors and we'll specify our policy called Cors. Let's save that, and run it once again. Then in our questions controller make sure your break point is still set. Once it's running, let's go back to our app and try posting once again.
Our break point is hit, and we can see we're getting the test value. So it's working. We'll hit continue, and if we check the network tab in our browser console we can see we have a 200 ok on our second question post. For now we aren't going to do anything with the data that's posted until we get into the next chapter with entity framework. But first, let's see how we can get data instead of posting it. We will cover that next.
- Creating and configuring the Angular project
- Creating forms with Angular
- Creating get and post routes in an ASP.NET Core controller
- Updating Angular service to post to API
- Persistence with Entity Framework
- Displaying and editing data in Angular with ASP.NET Core
- Navigating to different views in Angular
- Associations between entities with Angular and Entity Framework
- Setting up Identity Framework