Angular Navigation and Routing Basics
For SPA (Single Page Application), Routing is one of important things to understand.
Angular support Routing using @angular/router.
This entry supports
- Simple Routing
- Path Parameter
- Link
- Navigation by code
Create Router boiler plate
The simple way to create router with command
ng new testapp2 --routing --style scss
To do this, app-routing.module.ts is automatically generated.
This file managed routing, and module is automatically imported into app.module.ts
Prepare routing component
In this time, prepare following routing
localhost:4200/ localhost:4200/welcome localhost:4200/products localhost:4200/products/:id localhost:4200/welcome
app-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { WelcomeComponent } from './welcome/welcome.component'; import { ProductlistComponent } from './productlist/productlist.component'; import { ProductComponent } from './product/product.component'; const routes: Routes = [ { path: 'products', component: ProductlistComponent }, { path: 'products/:id', component: ProductComponent }, { path: 'welcome', component: WelcomeComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
Let’s check top page and other component
app.component.html
This is top page and support router and links
<ul> <li><a [routerLink]="['/welcome']">Home</a></li> <li><a [routerLink]="['/products']">Product List</a></li> <div class="container"> <router-outlet></router-outlet> </div> </ul>
Parameter
Next is ProductComponent.
This Component takes :id.
product.component.s
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.scss'] }) export class ProductComponent implements OnInit { pageTitle = ''; constructor(private route: ActivatedRoute) { console.log(this.route.snapshot.paramMap.get('id')); let id = +this.route.snapshot.paramMap.get('id'); // + <- parameter to string this.pageTitle += `:${id}` } ngOnInit(): void { } }
Navigation by code
Next is to support navigation by clicking button. Different from anchor tag, button needs to call navigation method using Router class
welcome.component.ts
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrls: ['./welcome.component.scss'] }) export class WelcomeComponent implements OnInit { constructor(private router: Router) {} ngOnInit(): void {} onBack(): void { this.router.navigate(['/products']); } }
welcome.component.html
<p>welcome works!</p> <button (click)="onBack()">Go Product</button>
Hashmode?
By default, Angular uses HTML5 mode.
To support hash mode,
@NgModule({ imports: [ RouterModule.forRoot([], { userHash: true }) ] })
コメント