Cách Routing hoạt động

Một ứng dụng Angular là một “single page application”. Điều đó có nghĩa là tất cả view của chúng ta sẽ hiển thị trong cùng một trang. Thường được định nghĩa trong tệp index.html. Vì vậy, cho dù ứng dụng có 5 view, 10 view hay 100 view thì cũng lần lượt xuất hiện trên một trang index đó. Tuy nhiên làm thế nào để quản lý được khi nào thì view nào xuất hiện. Đó chính là mục đích của routing.

Chúng ta cấu hình một route cho mỗi một component, cái mà chúng ta muốn hiển thị lên trang. Như một phần của ứng dụng chúng ta đang thiết kế, chúng ta cung cấp một menu, một toolbar, những button, images, hay data link cho phép người dùng chọn một view để hiển thị. Chúng ta buộc một route với mỗi một lựa chọn hoặc một hành động, khi mà người dùng chọn hay thực hiện một hành động lên chúng, thì route đi kèm sẽ được kích hoạt. Route được kích hoạt sẽ hiển thị giao diện của component mà nó được cấu hình.

Để hình dung rõ hơn, chúng ta sẽ nhìn qua quá trình đó với một minh họa dưới đây.

Dưới thanh nhập địa chỉ của browser là menu chúng ta thêm vào ứng dụng mẫu. chúng ta buộc một route vào mỗi menu option sử dụng một router directive có sẵn là routerLink.

Ví dụ, khi người dùng click lên product list thì Angular router sẽ điều hướng tới route của product. Url của trình duyệt cũng thay đổi để phù hợp với router này là sẽ trở thành http://localhost:3000/products. Khi đó Angular route tìm kiếm a một route được định nghĩa giống với path segment (‘products’) lúc này ProductListComponent sẽ được tải lên trong trường hợp này có nghĩa là templateUrl trong product-list.component.ts sẽ được hiển thị lên page.

Có một thắc mắc là chúng ta sẽ không biết ProductListComponent sẽ được load lên đâu? Angular có định nghĩa một routing directive dựng sẵn là <router-outlet></router-outlet> . Đây chính là nơi mà ProductListComponent sẽ xuất hiện.

Và đó là cách mà routing làm việc. Chúng ta sẽ đi sâu vào chi tiết làm rõ các bước này và thử chúng cho các component khác của ứng dụng mẫu. Nhưng trước hết, chúng ta hãy hoàn thành component còn thiếu là ProductDetailComponent, nó sẽ trông giống như dưới đây.