Join Alexander Zanfir for an in-depth discussion in this video Final touches, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this video, we'll add a couple finishing touches, such as creating a play button that will take us to our play component inside the nav bar and then once we're in our play component, clicking on an individual quiz will launch the Play Quiz component. So let's start in our nav bar. Let's open up the nav component and let's copy our first button on line seven and paste it below. We'll rename it to play and we'll change the router link to play as well.
Let's try that. Now if we go back home, then we hit play, we can see the quiz list. Next, let's update the router link for each quiz in the list. So let's open up the play component and we'll open up the HTML for that. Then instead of having a click directive, we'll take that out and add a router link. This router link will be quite complex since it needs to include a URL parameter. So if we look back at our quiz component HTML at line 16, we can copy that to use as an example.
So I'll grab the entire router link, close this out, and replace our router link. And instead of loading question, we'll load play quiz. But we'll still parse in the quiz ID. Let's try that. So if I click on the first quiz, it loads the correct URL parameter. If I go back, it loads the second and this quiz has no questions yet.
If I click on the third quiz, you can see it loads the correct questions. And that's it! So I'll add a couple more questions to my Pizza Quiz just to demonstrate the full functionality of the app. So I'll go to my quiz home and actually, I'll rename this button to My Quiz so that it stands out from the Play Quiz list. So back in navigation on line seven, I'll just add my to the front of that button text.
Then I'll select my Pizza Quiz and I'll edit questions. So I've created a pizza quiz with three questions. Let's go through it and see how it plays. And I got one out of three.
Well, now that everything's working, let's look at all the concepts we covered and some challenges for where you can take this application 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