Join Alexander Zanfir for an in-depth discussion in this video Quiz playlist, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this chapter, we'll implement the functionality that will allow users to play quizzes. We'll begin by implementing a new play component. This component will list all of the quizzes, whether they're yours or not. Then, clicking on a quiz from that list will allow you to play it. It will display all of the questions, allowing the user to scroll down the webpage, going through each question. Now that we have a quick overview of what we'll be implementing, let's get started. Let's continue in our frontend project.
I'll begin by creating a new component in our app folder. We'll call it play.component.ts. I'll copy the quiz component as a template. I'll change the selector to play, since we might compose with this component. Then I'll change the template URL to play.component.html and then finally the class name. Next I'll get rid of the quiz object, and I'll take out the line inside the ngoninit.
Next let's create the html. So I'll create a play component.html file. And then I'll use the quizzes component.html file as a template. Then let's go in our TypeScript file and create a quizzes object that will eventually set as our quizzes list. We can open up our quizzes component to copy the ngoninit between line 15 and 19 that we can use as a template to replace ours.
But instead of calling get quizzes, we'll create a new function called get all quizzes, since we want all of the quizzes, not just the quizzes that we own. So let's go to our api service and implement that. So I'll copy the get quizzes function on line 20 and paste it below and I'll call it get all quizzes. Then I'll append /all to the end of the URL on line 24.
Let's save those two changes. Now let's go into our backend and implement that endpoint. I'll stop the service. Then let's go into the quizzes controller and then let's copy the get quiz function on line 28. I won't copy the authorize decorator since this will be a public function. Then I'll paste it below. In the decorator, I'll specify a route called all and I'll call the function get all quizzes.
Then I'll take out line 38, since we don't need the user ID and then I'll take out the where function and simply return all of the quizzes from the context. Let's go ahead and run this and once it's loaded, we'll add a few quizzes. So let's go to our app, refresh and register. Then we'll add two new quizzes.
Let's hit refresh to see that they show up. Then let's bring up the browser, which Visual Studio opened up once it started our server, and instead of values in the URL, I'll put quizzes/all. Now we can see all of the quizzes, so we know that endpoint is working. So let's continue developing the frontend. Next, let's go ahead and register our play component with our app module. So let's add that to our list of imports and add it to our declarations.
Then let's add a path for that in our routes. So I'll copy the last one, paste it below, change the path to play and change component to play component. Let's save that and let's fix the comma before we give it a try. And once it reloads, let's go over to that play path. And we can see both quizzes showing up. Even if we log out and refresh, we'll see both quizzes showing.
Demonstrating that it is a public endpoint. Now the next thing we need to do is load the actual quiz when we click on one of the quizzes from our playlist. Let's take a look at 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