skillup

技術ブログ

JavaScript

AngularJSでのDB接続

投稿日:

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

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

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

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

$http

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

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

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

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

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

$resource

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

インストール

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

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

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

サンプルソース

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

※詳しくはリンク参照

一番シンプル(まずはテキストのjsonで例をしてしているのでテストもしやすい)
https://www.walbrix.com/jp/blog/2014-01-angularjs-resource.html

DBとつないでいる中ではかなりシンプルなタイプ
http://www.bucyou.net/blog/1108

網羅性はかなりある
http://wordpress.honobono-life.info/code/angularjs_sample_resource/

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …