skillup

技術ブログ

JavaScript

AngularJSでのDB接続

投稿日:2017年6月1日 更新日:

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で例をしてしているのでテストもしやすい)
AngularJSの $resource でサーバからデータを読み込む

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

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

cssフレームワークをnode_modulesから読み込む+cssの拡張

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 流れを言うと、下記のようになりま …

no image

ECMAScriptについて復習

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

no image

Angular複数ファイルでの読み込み

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。 ざっくり分けると ほとんどの処理に共通な処理を集めたファイル 特 …