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

Trong bài trước, chúng ta đã tìm hiểu về một số built-in directives.

Tóm tắt lại một xíu.

• ng-app: khai báo application trong page
• ng-controller: khai báo controller trong page
• ng-show/ng-hide: dùng để hiển thị, ẩn một thành phần nào đó trong page
• ng-repeat: dùng để iterate thành phần list dữ liệu trong page

Nhìn lại application ta đã xây dựng qua các bài trước.

Bạn chợt nghĩ, thêm một chút hình ảnh về sản phẩm không phải rõ ràng hơn sao. Ta thêm vào mỗi object product một danh sách các hình ảnh gồm hình thumbnail và hình full như sau.

Giờ thì đơn giản là đem thuộc tính này để hiển thị thôi.

Chạy và xem thử chúng ta làm được gì.

Mọi thứ đều ổn.

Tuy nhiên AngularJS không khuyến khích bạn sử dụng thẳng value từ expression vào thuộc tính src của thẻ img, bởi vì khi sử dụng như vậy browser sẽ cố gắng load hình được truyền vào trong thuộc tính src trước khi expression được tính toán xong.

AngularJS đưa ra cho chúng ta một built-in directive khác là ng-src để làm việc load hình ảnh trong thẻ img. Sử dụng đơn giản như sau.

Sử dụng ng-src như một biện pháp an toàn khi load hình ảnh nhé. Hehe.

Tiếp theo, chúng ta muốn hiển thị nhiều thông tin về sản phẩm hơn, vì thế chúng ta tạo thêm một số tab thông tin về Giới thiệu, Cấu hình, Đánh giá sản phẩm.

Thêm các tab vào mỗi phần hiển thị sản phẩm.

Khi click vào mỗi tab tương ứng thì thông tin sẽ được hiển thị, AngularJS cung cấp cho chúng ta built-in directive ng-click để tùy chỉnh behavior mỗi khi đối tượng được gán directive được click.

Như các bạn thấy, tương ứng với mỗi tab được click, ta set lại value của biến tab, đặt một expression để theo dõi sự thay đổi của biến tab, vì AngularJS hỗ trợ two way binding nên khi ta click vào từng tab, giá trị tab sẽ được thay đổi và update ngay tức thì trên page.

Nói lan man một chút về two way binding, các bạn có thể hiểu là khi có bất kỳ sự thay đổi nào ở model, dữ liệu sẽ được phản ánh ngay tức thì lên template và ngược lại.

Chúng ta define các tab như bên dưới và tự hỏi làm sao để khi click thì hiển thị đúng tab.

Nào cũng nhớ lại các bài trước, chúng ta đã được biết về ng-show phải không nào, áp dụng vào trường hợp này, ta có.

Và nó hoạt động mượt mà như thế này.

Nhưng khi refresh page thì không có giá trị mặc định nào được set cho biến tab, chúng ta có thể giải quyết dễ dàng vấn đề này bằng cách sử dụng directive ng-init như thế này.

Như vậy chúng ta đã giải quyết cho trường hợp khi người dùng mới vào website và hiển thị tab thông tin mặc định là giới thiệu sản phẩm.

Tóm lại trong bài viết này, chúng ta đã biết thêm về một số built-in directives ng-click, ng-src, ng-init cũng như cách sử dụng chúng.

Source code trong series này các bạn có thể dễ dàng tìm thấy ở https://github.com/codeaholicguy/angular-tutorial.

Hẹn gặp lại các bạn trong những bài tiếp theo.

Happy coding!