Posted at
vte.cxDay 12

【vte.cx入門】11.AngularJSによるデータリソースの操作

More than 3 years have passed since last update.

今回まで主にjQueryでの開発手順を説明してきましたが、vte.cxは様々なJavaScript用のライブラリで開発できます。

今回はその一つであるAngularJSによるデータリソースの操作について説明したいと思います。


はじめに

この記事はAngularJSでの開発経験があることを前提に書いています。

まだAngularJSで開発を行ったことがない場合は、基礎的なことを学んだ上で読むことをお勧めしています。


AngularJSのajax通信($httpサービス)

AngularJSのajax通信でリソースデータにアクセスできます。

$httpサービスを使用します。


GETリクエスト


GET

$http({

method: 'GET',
url: url
}).then(function(res){
// 取得成功
// res.data.feed でfeedデータ取得
}, function(res){
// 取得失敗
});


POSTリクエスト


POST

$http({

method: 'POST',
url: url,
data: JSON.stringify(reqdata)
}).then(function(res){
// 登録成功
// res.data.feed でfeedデータ取得
}, function(res){
// 登録失敗
});


PUTリクエスト


PUT

$http({

method: 'PUT',
url: url,
data: JSON.stringify(reqdata)
}).then(function(res){
// 更新成功
// res.data.feed でfeedデータ取得
}, function(res){
// 更新失敗
});


DELETEリクエスト


GET

$http({

method: 'DELETE',
url: url
}).then(function(res){
// 取得成功
// res.data.feed でfeedデータ取得
}, function(res){
// 取得失敗
});


$scopeで双方向データバインディングを行う

\$httpで受け取ったデータを$scopeに定義することで双方向データバインディングを行うことができます。


javascript

$scope.data.feed = {};

$http({
method: 'GET',
url: url
}).then(function(res){
// 取得成功
// $scopeに格納
$scope.data.feed = res.data.feed;
}, function(res){
// 取得失敗
});


html

<div>{{data.feed.entry[0].title}}</div>



ng-modelでリクエストデータを構築する

POSTやPUTをする際に、feed形式のリクエストデータが必要になります。

それをng-modelを使用し構築することで、ソースを簡略化できます。


html

<input type="text" ng-model="entry.title" value="hoge" />

<input type="text" ng-model="entry.subtitle" value="foo" />
<input type="text" ng-model="entry.summary" value="bar" />


javascript

$scope.entry = {};

$scope.data = {};

$scope.data.feed.entry = [];
$scope.data.feed.entry[0] = $scope.entry;

console.log($scope.data.feed.entry[0].title); ← hoge
console.log($scope.data.feed.entry[0].subtitle); ← foo
console.log($scope.data.feed.entry[0].summary); ← bar


こうすることでng-model="entry.title"などの値が変化したとしても、リアルタイムで$scope.data.feed.entryに値が格納されるためHTMLを編集するだけでデータの構築を行うことができます。


終わりに

vte.cxのリソースデータはJSONで扱うため、AngularJSの特徴である双方向データバインディングと非常に相性が良いです。

他のjavascriptフレームワークでもajax通信ができるライブラリであればvte.cxは対応できるはずです。

いろいろなフレームワークでアプリ開発を行ってみてください。