私は、Firebaseのリアルタイムデータベースにテキスト行を保存するCakePHP 3を使って構築されたWebアプリケーションを作成しています。要求がコントローラのエンドポイントの1つで受信されるとすぐに、データをデータベースにプッシュし始めます。その間、私は、ページ上に表示されるテキスト行を1つずつ見たいと思います。AngularJSを使用してCakePHP 3のFirebaseからデータを取得する
これまでのところ、リクエストプロセスに対処することができましたが、今ではそのデータをウェブページに送信できます。私はブラウザ上のコンソールとhtml出力の両方から送信されるテキストに従うことができます。しかし、私はフロントエンドにAngularJSをインストールしているので、このトピックについての助けに感謝します。
私はAngularJSを構築されていない可能性があるので、物事は、今現状では、私は以下の行を使用するとき、私は自分のページ上の任意の変更を見ることができません。
document.getElementById("demo").innerHTML = data.val();
ほとんど時代遅れの多くのドキュメンテーションがありますので上の、ウェブ、私は私が使用できる有用な情報を見つけるのに非常に苦労している。私は本当にこれに関する助けに感謝します。
のsrc /テンプレート/訪問/ code.ctp:
<!DOCTYPE html>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
<html lang="en">
<body>
<p id="demo"></p>
<script>
// Initialize Firebase
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
storageBucket: "...",
};
firebase.initializeApp(config);
var codeRef = firebase.database().ref('code/');
codeRef.on('child_added', function(data) {
console.log(data.val());
//document.getElementById("demo").innerHTML = data.val();
//document.getElementById("demo").innerHTML = "<br>";
// document.write(data.val());
// document.write("<br>");
window.scrollBy(0,50); // scroll to make sure bottom is always visible
});
</script>
</body>
のsrc /テンプレート/レイアウト/ code.ctp:
<!DOCTYPE html>
<html lang="en">
<?php echo $this->Html->css('style'); ?>
<head>
<br>"Push the button!"</br>
</head>
<body>
<!-- Page Content -->
<div id="content" class="container">
<?= $this->Flash->render() ?>
<div class="row">
<?= $this->fetch('content') ?>
</div>
</div>
</body>
</html>