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.

Selection_035

Để ý 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.

Selection_036

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

Selection_038

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.

Selection_039

Trong file app.js

Selection_041

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.

Selection_044

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.

Selection_045

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.

Selection_046

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!

Advertisements

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

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s