其中一項就是用來跟後端作資料的操作 (CRUD)
而 AngularJS 提供了 REST 以及 Ajax 這兩種方式讓你能夠跟後端的應用程式作溝通
以下就介紹 AngularJS 的 Ajax 方法吧
首先 AngularJS 提供了 一個 Service 讓開發者能夠運用 Ajax，那個 Service 就叫做 $http
當你的模組需要用到 Ajax 的時候，可以將 $http 直接注入到你的模組中，就像 Controller 的 $scope 一樣
接著就看一下一個簡單的範例吧
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">
<head>
<title>Examples</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var
demoApp = angular.module("demoApp", []);
demoApp.factory("Todo", function($http){
return {
list:
function(){
$http.get("todos.json").success(function
(data) {
return
data;
});
}
};
});
demoApp.controller("demoCtrl", function($scope,
Todo){
$scope.loadData = function(){
$scope.todos =
Todo.list();
}
});
</script>
</head>
<body>
<div ng-controller="demoCtrl">
<button ng-click="loadData()">Load Todos</button></br>
<table>
<tr>
<td>NO.</td><td>Name</td><td>Priority</td>
</tr>
<tr ng-repeat="todo in todos">
<td>{{todo.id}}</td>
<td>{{todo.name}}</td>
<td>{{todo.priority}}</td>
</tr>
</table>
</div>
</body>
</html>
以上範例用 factory method 建立了一個 Todo 模型，負責 Todo 的 Ajax 操作
其中在 list 函式中，我注入了 $http ，並利用 $http 的 get 函式來取得 todo.json 的資料回來，如下
...
$http.get("todos.json"")
...
上面短短一行程式我們只是發出了一個 GET 的請求發法，$http 提供了更過的請求方式
例如 post、delete、put 等等，它們各自分別對應到 HTTP 協定中的 POST、DELETE、PUT
看完了請求方式之後，該如何處理 Response 呢?
AngularJS 利用了一個 Javascript 的 pattern 叫做 promises，用來呈現一個非同步操作的結果
寫過 jQuery 的 Ajax 的人應該也會理解這樣的一個過程
簡單來說就是 當你呼叫 $http 的 get、post、delete、put 之後會回傳一個 promise 的物件
這個物件提供了三個函式
- success(callback function) 當 HTTP 請求成功時會呼叫你定義的 callback 函式
- error(callback function) 當 HTTP 請求失敗時會呼叫你定義的 callback 函式
- then(fn, fn) 註冊 成功與失敗的 callback 函式
$http.get("todos.json").success(function (data) {
return data;
});
其中 data 就是 todos.json 的 JSON 格式的資料了
沒有留言:
張貼留言