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

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

JavaScriptのcookieに関して

今までCookieの管理などはPHP側でやることが多かったのですが、JavaSciprtで実行することも可能です。 設定に関してはkey=value形式で突っ込めばOKです。 [crayon-5c10 …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …