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

JSでの他ファイル読み込み。requireやimportについて

JavaScriptに関して、知識が非常に古い段階で止まっているのでコツコツとアップデートをしております。 今回はrequireやimportなど、他のファイルの読み込みについてです。 PHPなどサー …

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

no image

jQuery子要素の取得方法など

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

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …