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

AngularJSでのHtmlFormオプション+Filter

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

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

no image

JavaScriptのタイマー

えーボタンを押すと、時間の計測がはじまり、別のボタンを押すとそのタイマーがとまるというもの。 WEBのアプリでは比較的よくお目にかかるタイプかと思います。 一番多いのは情報商材のページかもしれないです …

no image

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

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

no image

携帯のUIに関して

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