AngularJS/TIPS集/$http
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
***サンプル [#f00b2868]
$httpを使ったサンプルです。というかまだ殴り書きメモ。
RESTの仕様は
/api/hoge/ にHTTP GETすると一覧(JSON配列)
/api/hoge/[id].json にGETすると詳細
/api/hoge/ にHTTP POST すると登録
こんなよくある仕様だとします。これらに対して、
hogeService.getHoges();
hogeService.getHoge(id);
hogeService.saveHoge(postData);
こんな感じでサービスを呼び出せるようにします。
***サービスの定義 [#mcdf0b8a]
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);
}
};
}]);
***コントローラからの呼び出し方 [#h69ba8cd]
angular.module(APP_NAME)
.controller('HogeCtrl', ['hogeService', '$scope', f...
hogeService.getHoges()
.success(function (result) { // 値が戻ってき...
// 画面のhogesというオブジェクトに値をセ...
$scope.hoges = result;
});
$scope.addRow = function () { // たとえばボタン...
// 画面のhogesというオブジェクトにpostData...
$scope.hoges.push($scope.postData);
hogeService.saveHoge($scope.postData)
.success(function (result) {
$scope.postData = null;
});
};
$scope.delete = function (id) {
hogeService.getHoge(id).success(function (re...
alert(result);
});
};
}
]) ;
終了行:
***サンプル [#f00b2868]
$httpを使ったサンプルです。というかまだ殴り書きメモ。
RESTの仕様は
/api/hoge/ にHTTP GETすると一覧(JSON配列)
/api/hoge/[id].json にGETすると詳細
/api/hoge/ にHTTP POST すると登録
こんなよくある仕様だとします。これらに対して、
hogeService.getHoges();
hogeService.getHoge(id);
hogeService.saveHoge(postData);
こんな感じでサービスを呼び出せるようにします。
***サービスの定義 [#mcdf0b8a]
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);
}
};
}]);
***コントローラからの呼び出し方 [#h69ba8cd]
angular.module(APP_NAME)
.controller('HogeCtrl', ['hogeService', '$scope', f...
hogeService.getHoges()
.success(function (result) { // 値が戻ってき...
// 画面のhogesというオブジェクトに値をセ...
$scope.hoges = result;
});
$scope.addRow = function () { // たとえばボタン...
// 画面のhogesというオブジェクトにpostData...
$scope.hoges.push($scope.postData);
hogeService.saveHoge($scope.postData)
.success(function (result) {
$scope.postData = null;
});
};
$scope.delete = function (id) {
hogeService.getHoge(id).success(function (re...
alert(result);
});
};
}
]) ;
ページ名: