Join Alexander Zanfir for an in-depth discussion in this video Add the Angular Router, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] So far we have added everything in a single view. By composing our component views into one view in our app.component. Let's get a bit more flexible and add an angular router that will allow us to change the route to our URL path. This will then change the view and what we see being displayed. Eventually, we'll have an angular material tool bar at the top that will work as our navigation bar. And we'll have a button and view for our question component and another for questions list component.
The layout of this will change several times throughout the course as we progress. Let's begin by adding the router module to our app module. So let's open up out app.module.ts and then above our first custom component on line seven we'll add import RouterModule from @angular/router and as usual we'll need to add this module to our imports list, so let's add that below the HTTP client module on line 20.
But unlike the other modules, this router module is a bit special. It will take in a list of all our routes and we need to supply that with .forRoot, and inside we'll pass that list as a parameter. So next let's create that list. So above our decorator, we'll add a constant routes list, and let's add in the first route. We'll add a path property and set that to question.
Then we'll add a component property and set it to questionComponent. Next let's copy this route path object, paste it below, and then let's add a questions path from the questions component. Now that we have our basic routes list, let's pass that in to forRoot on line 26 in our router module. Let's save that and give it a try. Now that our app has reloaded, let's try to go to our question route. And I have appended /question to the URL in our browser.
But we're still seeing our app component instead of our question component. The problem is that angular doesn't know where to render the route. So we need to add an angular specific router element to do that. Let's go back to our editor and open up our app component. Inside our app component let's go to the front of our template and add our router-outlet and then close it, and give that a try. And as we can see, we're loading our question component on top of the app component.
So far to take this off we wouldn't be rendering any route and we'll just show everything that's in our app component template. And so then if we go to our questions component template we'll render the questions component view above everything else. There it is. So to recap router outlet lets angular know where to render the view you are trying to route to. And so it'll take the route, and find the component of that route and render it in the router element wherever we specified it.
This also means that anything we put above or below it will also show no matter where we are in our app, or what we view, or are showing. So we could put a header, footer, or nav bar around it. And that's what we will do in the next video, but currently this is a bit messy. So what I'd like to do is create yet another component called our home component which will contain our original question and questions component as children. So let's cut that out of here, and we're left with just our router outlet element.
Then let's create the new component, we'll call it home.component.ts I'll paste that in just so I can copy our AppComponent as a template. And I'll paste that below. Then I'll take line one, cut it out, and replace the template with it. Since we won't be composing with this view, I won't need a selector and I'll take that out. Then I'll change the class name to HomeComponent and I'll get rid of the title here, and also in our AppComponent.
Now let's register it with our app module. So I'll import it, and then add it to our declarations. And then finally let's create a new path and I'll paste this above. And the path will be empty since we want the root path to load our HomeComponent. Let's save that and give it a try.
So if we go to our app route it loads our HomeComponent, and it functions just as we expected. But then if we want to navigate to only questions we can do that as well. So now instead of me typing in the address manually, let's go ahead and add that nav bar so we can click on our different views.
- 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