Giới thiệu về Routing trong AngularJS
Routing trong AngularJS giúp chuyển đổi giữa các views (giao diện) khác nhau trong ứng dụng mà không cần tải lại trang web. Nó cho phép tạo các ứng dụng Single Page Application (SPA), nơi mà mọi tương tác với người dùng chỉ diễn ra trên một trang web duy nhất, giúp tăng tốc độ và trải nghiệm mượt mà hơn.
Cài đặt ngRoute
Để sử dụng routing trong AngularJS, trước hết cần thêm module ngRoute vào ứng dụng. Có thể cài đặt nó thông qua file CDN thêm vào dự án. Thêm đoạn mã sau vào tab head trong index.html:
Cấu hình Routing
Sau khi cài đặt ngRoute, có thể sử dụng $routeProvider để cấu hình các route cho ứng dụng. Điều này được thực hiện bằng cách sử dụng hàm config() trong AngularJS.
- .when(): Định nghĩa mỗi route và liên kết nó với một template (hoặc controller).
- .otherwise(): Được sử dụng khi URL không khớp với bất kỳ route nào đã định nghĩa. Ở ví dụ trên, nó sẽ chuyển hướng về trang chủ khi người dùng nhập sai URL.
Tạo các View
Mỗi route sẽ liên kết với một view cụ thể (một file HTML). Tạo các file HTML như sau:
Sử dụng ng-view
Để hiển thị các view tương ứng, cần sử dụng directive ng-view trong file HTML chính của ứng dụng. ng-view sẽ là nơi chứa nội dung của các template được hiển thị dựa trên URL.
Chuyển đổi giữa các View
Trong file HTML chính, có thể tạo các liên kết để chuyển đổi giữa các views bằng cách sử dụng dấu #! theo sau là đường dẫn của route.
Khi người dùng click vào các liên kết này, URL sẽ thay đổi và nội dung tương ứng sẽ được hiển thị trong thẻ ng-view.
Kết luận
Routing trong AngularJS giúp dễ dàng quản lý các view trong ứng dụng mà không cần phải tải lại trang. Điều này giúp cải thiện trải nghiệm người dùng và hiệu suất của ứng dụng, đặc biệt là trong các ứng dụng web phức tạp.
Giảng viên Cao Hoàng Khải
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
