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 機能として確認したこと2 component3 vue-route4 vuex5 computed6 created,mounted7 …

no image

vue-routerについて

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

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …