Series AngularJS cho người mới: Built-in Directives (Phần 3)

Xin chào, xin chào. Chúng ta lại gặp lại nhau trong series bài giới thiệu về các built-in directives trong AngularJS.

Tự sướng với những gì chúng ta đã làm được qua các bài trước nào.

Để ý thì khi bấm vào các tab thông tin về Giới thiệu, Cấu hình, Đánh giá thì style của mỗi tab không thay đổi, việc này sẽ gây khó khăn cho người dùng khi không biết mình đang bấm vào tab nào. Vậy làm sao để chỉnh sửa style của các thẻ li này khi được bấm vào.

AngularJS đem đến cho các bạn directive ng-class để làm việc này. Sử dụng như sau.

Chạy và cảm nhận kết quả.

Khi sử dụng ng-class, các bạn nên lưu ý, class name sẽ không bị duplicate nếu thẻ đã tồn tại class name được set trước đó. Khi expression thay đổi thì class được add vào trước đó sẽ bị remove đi và class mới sẽ được thêm vào.

Mọi thứ hiện giờ đều hoạt động tốt, đúng không? Tuy nhiên bạn sẽ cảm thấy hơi lộn xộn vì code logic được gắn hoàn toàn trên html. Rồi các bạn đặt ra câu hỏi vậy chúng ta phải làm gì để mọi thứ có thể rõ ràng hơn, dễ kiểm soát hơn không?

Tất nhiên, chắc hẳn các bạn chưa quên về Controller trong AngularJS mà tôi đã giới thiệu trong các bài trước. Chúng ta sẽ đem hết tất cả các code liên quan đến logic cũng như behavior bỏ vào trong controller. Nào cũng bắt đầu.

Chúng ta khai báo một controller là PanelController để quản lý các tab.

Trong file app.js

Tiếp theo, trong PanelController, chúng ta set giá trị init cho tab là ‘description’, tạo một function setTab để set lại giá trị cho tab, và tạo thêm một function khác thực hiện chức năng kiểm tra tab được truyền vào là tab đang được chọn.

Trên page html, thay vì set thẳng value cho tab, ta chỉ việc thay các biểu thức logic bằng những hàm đã viết sẵn trong controller.

Các bạn nhớ remove directive ng-init đi vì chúng ta không cần sử dụng nữa nhé, giá trị cho tab hiện giờ đã nằm gọn trong controller rồi.

Yay, mọi thứ vẫn hoạt động tốt mà code của chúng ta thì rõ ràng dễ hiểu hơn.

Source code trong bài các bạn tìm ở đây https://github.com/codeaholicguy/angular-tutorial

Hẹn gặp lại các bạn trong bài tiếp theo, và tôi sẽ đem đến cho các bạn một chủ đề mới.

Happy coding with AngularJS!