skillup

技術ブログ

JavaScript

PHP(DBアクセス)→HTML→Angularを実行するために

投稿日:

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。

というのも通常のWebアプリ(例えばPHPとしましょう。)であるURLをたたいてAngularを使ってデータベースにアクセスしようとすると下記のような流れになります。

  1. PHPにアクセスする(DBにはアクセスせずレンダリングのみ)
  2. HTMLにレンダリング
  3. JavaScript(Angular読み込み)
  4. DBにアクセス
  5. バインド

で、実際にやってみるとわかりますが、ふた昔前ぐらいのアプリみたいに画面開いてワンテンポあいてからデータが表示されるんですよね・・・

これはいくらなんでもあり得ないだろうと・・・しかもHTMLに書いたAngularのコードがサブリミナル効果みたいにちらっと見えちゃってます。

Angularも普及してから結構立ってるとは思うのですが、ネットでこのことに触れている(というかデータベースと連携しているアプリ自体が少ない)情報はあまりありませんでした。

よって下記のような流れで考えてみました。

  1. PHPにアクセス
  2. DBにアクセスし、データ取得
  3. HTMLにレンダリング(先ほどのデータを渡す)
  4. JavaScript読み込み(HTMLからJSONを取り込む)
  5. バインド

上記の流れで進めるとHTMLにJSONで吐き出して、それをJavaScriptで読み取ることが当然必要になってきます。いろいろ探してみると下記のような方法でJavaScriptにデータを渡せます。PHPからHTMLにデータを渡すときは普通の配列のまま渡せばOKです。

ng-initは一番最初に実行される処理です。

HTML側

Angular側

 参考リンク

上のソースはここのコピペです(爆)
http://blog.bagooon.com/?p=647

ちなみにAngularを読み込むまでにHTMLが表示されてしまう問題は下記のタグを組み込むと解決します。これで問題が解決しました。

私はControllerにそのままつけてます。

http://angular-js.net/delay-resolution/

-JavaScript
-

執筆者:


comment

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

関連記事

no image

JSF+ajax

JSFでajaxを使うときにいろいろと調べたのでメモ。 やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。 ajaxを使う …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

GoogleMapのカスタマイズ

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