Cấu hình routes

Routing dựa trên component, vì vậy chúng ta xác định những thành phần mà chúng ta muốn routing tới chúng và định nghĩa từng component một. Hãy cùng xem cách điều này được thực hiện.

Một ứng dụng Angular có một router mà được quản lý bở Angular router service và chúng ta đã biết rằng để sử dụng service chúng ta cần đăng ký module cung cấp service này, cũng tương tự như cách chúng ta đăng ký HttpModule. Angular cung cấp cho chúng ta RouterModule, để khai báo chúng ta sẽ xem đoạn code mẫu dưới đây.

//app.module.ts

import { RouterModule } from '@angular/router';

@NgModule({

imports: [

BrowserModule,

FormsModule,

HttpModule,

RouterModule.forRoot([]) // cấu hình trong mảng []

//RouterModule.forRoot([], {useHash: true}) sử dụng # trong url

],

declarations: [

...

],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Với đoạn đăng ký trên, chúng ta đã sẵn sàng để cấu hình những routes.

// Configuring Routes

[

{ path: 'products', component: ProductListComponent },

{ path: 'product/:id', component: ProductDetailComponent },

{ path: 'welcome', component: WelcomeComponent },

{ path: '', redirectTo: 'welcome', pathMatch: 'full' },

{ path: '**', component: PageNotFoundComponent }

]

Router phải được cấu hình với một danh sách các route được định nghĩa. Mỗi định nghĩa xác định một đối tượng route. Mỗi route yêu cầu một path(dường dẫn). Thuộc tính path này định nghĩa một phần của URL cho route. Khi route được kích hoạt, path này sẽ nối vào URL ứng dụng của chúng ta. Người dùng có thể gõ thêm vào hoặc bookmark Url này để có thể trở lại trực tiếp vào view của thành phần liên quan tới path này.

Trong hầu hết các trường hợp, mỗi một path chúng ta sẽ chỉ định với một component, là một component mà liên quan đến route. Template của component này sẽ được hiển thị khi route được kích hoạt. Hãy xem qua tất cả các đối tượng route được định nghĩa trong list danh sách ví dụ trên.

• Route đầu tiên chỉ đơn giản là định tuyến một path URL cụ thể tới ProductListComponent.

{ path: 'products', component: ProductListComponent }

• :id trong Router thứ hai đại diện cho một tham số của route. Trang chi tiết sản phẩm sẽ hiển thị chi tiết của một sản phẩm, do đó id cần để biết sản phẩm nào được hiển thị .

{ path: 'product/:id', component: ProductDetailComponent }

• Route thứ ba đơn giản là để định tuyến cho WelcomeComponent.

{ path: 'welcome', component: WelcomeComponent }

• Rotue thứ tư định nghĩa một định tuyến mặc định khi chúng ta không thêm bất cứ một path nào vào Url gốc. Trong trường hợp này khi người dùng nhập vào một Url gốc ứng dụng sẽ hiển thị WelcomeComponent

{ path: '', redirectTo: 'welcome', pathMatch: 'full' }

• Trong route cuối cùng, chúng ta thấy dấu 2 sao ‘**’, điều này có ý nghĩa bất kỳ path nào trên Url không giống với những route đã cấu hình thì sẽ active route này. Và khi đó PageNotFoundComponent sẽ hiển thị.

{ path: '**', component: PageNotFoundComponent }

Ngay bây giờ, chúng ta đã có thể cấu hình 3 component Welcome, ProductList, và ProductDetail theo như mục đích mà chúng ta đặt ra ở chương này. Hãy bắt đầu ngay trên source code ứng dụng mẫu của chúng ta.