サンプル †$httpを使ったサンプルです。というかまだ殴り書きメモ。 RESTの仕様は /api/hoge/ にHTTP GETすると一覧(JSON配列) /api/hoge/[id].json にGETすると詳細 /api/hoge/ にHTTP POST すると登録 こんなよくある仕様だとします。これらに対して、 hogeService.getHoges(); hogeService.getHoge(id); hogeService.saveHoge(postData); こんな感じでサービスを呼び出せるようにします。 サービスの定義 †angular.module(APP_NAME) .factory('hogeService', ['$http', function ($http) { function callAjax(method, url, data) { console.log(data); var promise = $http({ method: method, url: url, data: data }); return promise; } return { getHoges: function () { var method = 'GET'; var url = '/api/hoge/'; return callAjax(method, url); }, getHoge: function (id) { var method = 'GET'; var url = '/api/hoge/' + id + '.json'; return callAjax(method, url); }, saveHoge: function (postData) { var method = 'POST'; var url = '/api/hoge/'; console.log(postData); return callAjax(method, url, postData); } }; }]); コントローラからの呼び出し方 †angular.module(APP_NAME) .controller('HogeCtrl', ['hogeService', '$scope', function (hogeService, $scope) { hogeService.getHoges() .success(function (result) { // 値が戻ってきたときのコールバック処理。 // 画面のhogesというオブジェクトに値をセット。 $scope.hoges = result; }); $scope.addRow = function () { // たとえばボタンにaddRow()メソッドを紐付けたとして // 画面のhogesというオブジェクトにpostDataを追加して、そのJSONデータをセット。 $scope.hoges.push($scope.postData); hogeService.saveHoge($scope.postData) .success(function (result) { $scope.postData = null; }); }; $scope.delete = function (id) { hogeService.getHoge(id).success(function (result) { // getHogeしてるけどサーバで削除処理して // 削除しました、なんてダイアログを出す、など。 alert(result); }); }; } ]) ; |