Angularjs phần 2 - Xử lý HTTP & AJAX
Bài trước chúng ta đã tìm hiểu về tổng quan về Angularjs, bài tiếp theo chúng ta sẽ cùng tìm hiểu sử dụng về HTTP & AJAX. HTTP & AJAX AJAX là một kỹ thuật rất quan trọng trong nền điện toán hiện đại, cũng như mọi Javascript framework khác AngularJS cung cấp cho người dùng công cụ để ...
Bài trước chúng ta đã tìm hiểu về tổng quan về Angularjs, bài tiếp theo chúng ta sẽ cùng tìm hiểu sử dụng về HTTP & AJAX.
HTTP & AJAX
AJAX là một kỹ thuật rất quan trọng trong nền điện toán hiện đại, cũng như mọi Javascript framework khác AngularJS cung cấp cho người dùng công cụ để làm việc với AJAX thông qua một injector là $$ttp. Dưới đây là một ví dụ về xử lý ajax
index.html
<!DOCTYPE html> <html ng-app> <head> <title>Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="ExampleCtrl"> <table border="1" cellspacing="0"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Amount</th> <th>Tool</th> </tr> </thead> <tbody> <tr ng-repeat="item in list"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td><input type="text" ng-model="item.amount"></td> <td> <button ng-click="doEdit(item)">Edit</button> <button ng-click="doDelete(item)">Delete</button> </td> </tr> </tbody> </table> <pre>{{ list |json }}</pre> </div> </body> </html>
script.js
ExampleCtrl = function($scope, $http) { $http.get('/get.json').success(function(data) { $scope.list = data; }); $scope.doEdit = function(item) { var notice = "Item #" + item.id + " has been edited with amount: " + item.amount; $http.put('/update', item).success(function(data) { alert(notice); }); } $scope.doDelete = function(item) { var notice = "Item #" + item.id + " has been deleted"; //Remove item in list $scope.list.splice($scope.list.indexOf(item),1); //Delete at /delete/:id $http.delete('/delete/' + item.id).success(function(data) { alert(notice) }); } }
get.json (JSON for get data)
[
{"id": 1, "name": "iPhone 5s", "amount": 10},
{"id": 2, "name": "Nexus 5", "amount": 12},
{"id": 3, "name": "Xperia Z1", "amount": 13},
{"id": 4, "name": "Motorola X", "amount": 8},
{"id": 5, "name": "Galaxy S4", "amount": 21}
]
- $scope list sẽ được lấy từ ajax get request, sau đó bind vào html thông qua ng-repeat.
- Khi người dùng cập nhật dữ liệu, model sẽ được tự động thay đổi (xem ở json debug bên dưói html)
- Khi thực hiện sự kiện click chuột thì $$ttp sẽ được gọi và thực hiện các thao tác request tương ứng (PUT/DELETE)
- Quá trình ví dụ trên chỉ mới implements ở bên phía front-end, bạn cần viết thêm các mã nguồn cho backend (/update | /delete/:id)
- Tương tự, Angular cũng cung cấp $$ttp.post để thực hiện xử lý ajax cho method POST
- Xem thêm chi tiết về http tại: http://docs.angularjs.org/api/ng.http
Filter
Trong ví dụ ở phía trên, trong phần document bạn có thể thấy chúng ta có cú pháp đề định dạng dữ liệu dạng JSON
{{ list | json}}
AngularJS cung cấp sẵn cho chúng ta một số các filter hữu ích, dùng để định dạng cũng như lọc dữ liệu, ví dụ về định dạng tiền tệ:
index.html
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/1.2.12/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="Ctrl"> <input type="number" ng-model="amount"><br> default currency symbol ($):<span id="currency-default">{{amount | currency}}</span> custom currency identifier (USD$): <span>{{amount | currency:"USD$"}}</span> </div> </body> </html> ``` script.js ```javascript Ctrl = function($scope) { $scope.amount = 1234.56; }
Kết quả sau khi định dạng của filter sẽ như sau:
default currency symbol ($): $1,244.00 custom currency identifier (USD$): USD$1,244.00
Bài của mình đến đây là hết. Hen gặp lại các bạn trong phần tiếp theo.
