skillup

技術ブログ

JavaScript

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

投稿日:2017年1月16日 更新日:

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側

 参考リンク

上のソースはここのコピペです(爆)
PHPから出力したHTMLから、javascriptにデータ(連想配列)を引き渡す方法

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

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

no image

ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …

no image

Vue.jsについて

次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・ Contents1 vue.jsとは?2 ソース3 参 …

no image

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

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

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