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

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

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

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

no image

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

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

no image

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

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

no image

携帯のUIに関して

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