AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。
というのも通常のWebアプリ(例えばPHPとしましょう。)であるURLをたたいてAngularを使ってデータベースにアクセスしようとすると下記のような流れになります。
- PHPにアクセスする(DBにはアクセスせずレンダリングのみ)
- HTMLにレンダリング
- JavaScript(Angular読み込み)
- DBにアクセス
- バインド
で、実際にやってみるとわかりますが、ふた昔前ぐらいのアプリみたいに画面開いてワンテンポあいてからデータが表示されるんですよね・・・
これはいくらなんでもあり得ないだろうと・・・しかもHTMLに書いたAngularのコードがサブリミナル効果みたいにちらっと見えちゃってます。
Angularも普及してから結構立ってるとは思うのですが、ネットでこのことに触れている(というかデータベースと連携しているアプリ自体が少ない)情報はあまりありませんでした。
よって下記のような流れで考えてみました。
- PHPにアクセス
- DBにアクセスし、データ取得
- HTMLにレンダリング(先ほどのデータを渡す)
- JavaScript読み込み(HTMLからJSONを取り込む)
- バインド
上記の流れで進めるとHTMLにJSONで吐き出して、それをJavaScriptで読み取ることが当然必要になってきます。いろいろ探してみると下記のような方法でJavaScriptにデータを渡せます。PHPからHTMLにデータを渡すときは普通の配列のまま渡せばOKです。
ng-initは一番最初に実行される処理です。
HTML側
|
1 |
<div ng-init="loadData('<?= rawurlencode(json_encode($loadData)) ?>')"></div> |
Angular側
|
1 2 3 |
$scope.loadData = function(data) { var reportTotalData = angular.fromJson(decodeURIComponent(data)); } |
参考リンク
上のソースはここのコピペです(爆)
PHPから出力したHTMLから、javascriptにデータ（連想配列）を引き渡す方法
ちなみにAngularを読み込むまでにHTMLが表示されてしまう問題は下記のタグを組み込むと解決します。これで問題が解決しました。
|
1 |
[class="ng-cloak"] |
私はControllerにそのままつけてます。
