Routing is a way for us to move between pages in a web application. In this tutorial, I will guide you all how we routing in Angular.
First, I will create an Angular project as an example:
Run the application, you will see the results as follows:
Now, I will split the content of the app.component.html file into two pages: a home.component.html page that has the content resemble with the current app.component.html page and the other page huongdanjava.component.html which has the contents resemble the above section including “Welcome to app!” and the Angular logo, the bottom is the words “Here is the link to Huong Dan Java” and link to my Huong Dan Java website. Details of the contents of the file will change now as follows:
home.component.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h2>Here are some links to help you start: </h2> <ul> <li> <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> </li> <li> <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> </li> <li> <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> </li> </ul> |
home.component.ts:
|
1 2 3 4 5 6 7 8 |
import { Component } from "@angular/core"; @Component({ selector: 'app-body', templateUrl: './home.component.html' }) export class HomeComponent { } |
huongdanjava.component.html:
|
1 2 3 4 5 6 |
<h2>Here are the link to Huong Dan Java: </h2> <ul> <li> <h2><a target="_blank" rel="noopener" href="https://huongdanjava.com/">Huong Dan Java</a></h2> </li> </ul> |
huongdanjava.component.ts:
|
1 2 3 4 5 6 7 8 |
import { Component } from "@angular/core"; @Component({ selector: 'app-body', templateUrl: './huongdanjava.component.html' }) export class HuongDanJavaComponent { } |
At this point the contents of the app.component.html file will look like this:
|
1 2 3 4 5 6 7 8 |
<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> </div> <app-body></app-body> |
The content of the AppComponent class needs to be revised as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HomeComponent } from './home.component'; import { HuongDanJavaComponent } from './huongdanjava.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, HuongDanJavaComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { } |
At this point, if you run the application again, you will not see anything. But if you right click, select Inspect in Google Chrome and move to the Console tab you will see the following error:
This is because we are currently defining two components with the same selector value. No problem, you can ignore this error now. Now, we will apply routing to our Angular application!
In an Angular application, the RouterModule module assumes the role of the routing object.
To use this module, we need to import it into our application, defining the routing: what URL corresponds to which component, and finally export it for our application to use.
Details, I will create a file called app-routing.module.ts in the src/app directory:
then define a new module using Angular’s RouterModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home.component'; import { HuongDanJavaComponent } from './huongdanjava.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'huongdanjava', component: HuongDanJavaComponent }, ] @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } |
As you can see from the above, I used the Routes class to define information about the URLs that correspond to the components in our application. The “home” path will correspond to HomeComponent and the “huongdanjava” path will correspond to the HuongDanJavaComponent that it has defined.
After defining the URL information with the component, we need to pass this information to the RouterModule with the static method forRoot(). Then export the RouterModule to our application.
After we have defined the AppRoutingModule module, we need to import it into the AppModule: