在
AngularJS 教學 - MVC 介紹 中有特別提到 Model(模型) 的職責
其中一項就是用來跟後端作資料的操作 (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>
