large-companyangular

Series AngularJS cho người mới: Controller

Trong bài trước chúng ta đã biết các khái niệm cơ bản trong AngularJS gồm Directive, Module, Expression. Hôm nay chúng ta cùng tìm hiểu cách xử lý dữ liệu với Controller trong AngularJS.

Nào cùng bắt đầu.

Chúng ta có một dữ liệu dạng JSON đơn giản như sau.

Chúng ta muốn hiển thị dữ liệu này lên Website thì phải làm thế nào?

Đầu tiên tạo file index.html, app.js và import như bài viết trước.

Controller là nơi để chúng ta định nghĩa các hành vi của Application.

Chúng ta khai báo Controller trong file app.js như sau.

Bao đóng Javascript của bạn trong Closure luôn là một thói quen tốt. Vì sao? Có thể hiểu đơn giản bao đóng trong Closure giúp tránh khỏi việc leaking biến ra global scope. Tôi sẽ có một bài viết khác giải thích rõ hơn về Closure trong Javascript.

Trong đoạn code trên các bạn có thể thấy, sau khi khai báo Controller, trong thân hàm, tôi gán Object tablet cho thuộc tính product của Controller, lưu ý từ khóa this ở đây đang chỉ đến Controller.

Kế điến chúng ta tìm cách để áp dụng Controller đã được khai báo này vào trong file HTML. Chắc hẳn các bạn vẫn còn nhớ khái niệm Directive trong bài trước. Chúng ta sẽ sử dụng Directive ng-controller để chỉ định áp dụng StoreController đã được khai báo vào thẻ div hiển thị thông tin sản phẩm trong file index.html.

Chắc các bạn đang thắc mắc tại sao lại có dòng StoreController as store, từ khóa as dùng để chỉ định Alias giúp chúng ta gọi Controller bằng Expression.

Nào cùng chạy thử page index.html.

Selection_006

Ouch, tại sao thông tin của product lại không hiện ra mà thay vào đó ta lại thấy Expression.

Cùng xem lại, bạn thấy chúng ta chưa apply module nào lên page index.html. Nhớ lại bài trước, ta sử dụng Directive ng-app đễ apply module lên page.

Sau đó chạy lại ta thấy được kết quả.

Selection_007

Wow, chúng ta đã thấy kết quả. Thử move thông tin description ra bên ngoài thẻ div như sau.

Chạy lại và ta thấy kết quả.

Selection_008

Chúng ta không hề thấy phần description nữa, lưu ý lại, chúng ta khai báo Controller trong thẻ div, thì scope ta code thể sử dụng Controller này chỉ nằm trong thẻ div đó, đưa phần thông tin về description ra ngoài có nghĩa phần thông tìn này đã out scope, vì thế thông tin này sẽ không bao giờ được hiển thị.

Xong, hôm nay chúng ta đã hiểu làm thế nào để xử lý dữ liệu trong AngularJS qua Controller, hẹn gặp lại các bạn trong các bài viết tiếp theo, Happy coding!

Các bạn có thể tìm thấy source code ở https://github.com/codeaholicguy/angular-tutorial

Advertisements

One thought on “Series AngularJS cho người mới: Controller

Gửi phản hồ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