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

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

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

no image

ajaxがらみのイベントの発動とwhenに関して

実務で住所のプルダウンを実装する機会がありました。 [東京都][中央区][明石町] みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。 これを実装するときのポイントですが、新規保存より …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

JavaScriptのthisについて

今回はJavaScriptのthisについて。 JavaScriptのthisの場合、呼び出し方によってthisの参照先が変わります。 4種類あるとされていますが、使われ方で分類すると私の場合、下記の …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

アーカイブ