Questions Management – Frontend – Apply routing using RouterModule of Angular

I gave you an overview about routing in Angular. In this tutorial, we will apply it to our Questions Management application.

First, I will create a new module called AppRoutingModule in the app-routing.module.ts file in the src/app directory:

Questions Management - Frontend - Apply routing using RouterModule of Angular

with the following content:

As you can see, we only have a Dashboard page so we can only configure this page. Any request with a non-existent URL will also be redirected to the Dashboard.

Next, I will declare this AppRoutingModule module in the AppModule of Questions Management application as follows:

Then replace the <qm-body> tag in the app.component.html file into the <router-outlet> tag as follows:

At this point, if you run the application, you will see that the content of the DashboardComponent component will be returned, no matter what access to your request.

Now we will use the routerLink directive for the left menu with Questions Management on the left and top 

Since the contents of these sections are in the NavigationModule, so to do this, you need to import the AppRoutingModule into the NavigationModule:

Then, replace the href attribute in the <a> tag in the following files using the Angular routerLink directive.

File navigation.component.html:

From

to

Sidebar.component.html file:

From:

to

OK, so we have finished applying the Routing application to Question Management.

Questions Management – Frontend – Apply routing using RouterModule of Angular
Đánh giá bài viết
Chia sẽ bài viết này ...Share on Facebook
Facebook
5Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.