AngularJSでのDB接続

投稿日：2017年6月1日更新日：2020年5月7日

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。

注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解しておかないとえらい目にあります・・・(汗)

要はDBアクセスの後に何かをする処理と連動させないことでしょう(DBからデータを取ってくる前に次の処理が始める可能性があるため・・)。させる場合はコールバックの中に処理を書きますが、見通しが悪くなるため若干イレギュラーかと思います。

基本の書き方(Angular2系ですので1の場合は若干書き方が異なるかもしれません。)

Contents

1 $http
2 $resource

$http

標準で使われている関数として$httpという関数があります。

例えばあるURLに対してPOSTでデータを投げる場合は下記のように書きます。ほとんどjQueryと一緒ですね・・・

//コントローラー定義時点で$httpを定義しておく必要があります。
controller("sampleCtrl", [ '$scope', '$http', function ( $scope, $http ) {

//http自体はここから
$http({
    method : 'POST',
    url : lastUrl,
    data: postData
}).then(function(res) {
   //成功した時の処理　
}, function(res) {
   //失敗した時の処理
});

//コントローラー定義時点で$httpを定義しておく必要があります。

controller("sampleCtrl", [ '$scope', '$http', function ( $scope, $http ) {

//http自体はここから

$http({

method : 'POST',

url : lastUrl,

data: postData

}).then(function(res) {

//成功した時の処理　

}, function(res) {

//失敗した時の処理

});

同期的な処理を書きたい場合は「成功した時の処理」の中に書くことになります。

また特定のメソッドで決まっている場合には下記のように短縮して書けます。※下記はGETの例

data2 = $http.get('URL').then(function(res){
          return res.data;
});

data2 = $http.get('URL').then(function(res){

return res.data;

});

この場合data2の後になにも処理がなく、そのまま$scopeにセットするような場合には有用といえるでしょう。(※同期的でなくてもよいため)

$resource

さらに$httpをラッパーしたメソッドに$resourceがあります。

インストール

bowerに下記のように書いてインストールすればOKです。

"dependencies": {
    "angular-resource":"*"
}

"dependencies": {

"angular-resource":"*"

}

htmlで実際にソースを読み込みます。

bower以外でもこのライブラリが読み込めればOKです。

<script src="./bower_components/angular-resource/angular-resource.min.js"></script>

1	<script src="./bower_components/angular-resource/angular-resource.min.js"></script>

サンプルソース

var app = angular.module("myApp", ["ngResource"]);
.controller("itemCtrl", function ($scope, $resource) {
    //DBからrestを返してもらって読み込み
    var rest = $resource(URL);
    var data = rest.query(function(data, headers){
                    return data;
               },function(err) {
                  $scope.msg = "サーバーレスポンスエラー：" + err.statusText;
               }
    );
});

var app = angular.module("myApp", ["ngResource"]);

.controller("itemCtrl", function ($scope, $resource) {

//DBからrestを返してもらって読み込み

var rest = $resource(URL);

var data = rest.query(function(data, headers){

return data;

},function(err) {

$scope.msg = "サーバーレスポンスエラー：" + err.statusText;

}

);

});

上記ではqueryというメソッドのみを紹介していますが、get(特定のキーでデータを取得),post(新規投稿)のほか自分自身でメソッドを作成することもできます。

※詳しくはリンク参照

一番シンプル(まずはテキストのjsonで例をしてしているのでテストもしやすい)
AngularJSの $resource でサーバからデータを読み込む

DBとつないでいる中ではかなりシンプルなタイプ
angular.js – resource を使う

網羅性はかなりある
AngularJSコードサンプル