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.
| var tablet = { | |
| name: 'iPad Air 2 64G', | |
| price: 499, | |
| description: 'The newest Apple iPad.' | |
| } |
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.
| (function() { | |
| var app = angular.module('Store', []); | |
| app.controller('StoreController', function() { | |
| this.product = tablet; | |
| }); | |
| var tablet = { | |
| name: 'iPad Air 2 64G', | |
| price: 499, | |
| description: 'The newest Apple iPad.' | |
| } | |
| })(); |
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.
| <div ng-controller="StoreController as store"> | |
| <h1>{{store.product.name}}</h1> | |
| <h2>$ {{store.product.price}}</h2> | |
| <p>{{store.product.description}}</p> | |
| </div> |
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.
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.
| <html ng-app="Store"> |
Sau đó chạy lại ta thấy được kết quả.
Wow, chúng ta đã thấy kết quả. Thử move thông tin description ra bên ngoài thẻ div như sau.
| <div ng-controller="StoreController as store"> | |
| <h1>{{store.product.name}}</h1> | |
| <h2>$ {{store.product.price}}</h2> | |
| </div> | |
| <p>{{store.product.description}}</p> |
Chạy lại và ta thấy kết quả.
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
Codeaholicguy 
anh ơi em không hiểu chỗ này:
var tablet = {
name: ‘iPad Air 2 64G’,
price: 499,
description: ‘The newest Apple iPad.’
}
dữ liệu dạng JSON thì tất cả phải dùng dấu ” chứ ạ
đây là JavaScript object đó e