AngularJSを使用してCakePHP 3のFirebaseからデータを取得する

私は、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>

出典

2016-06-24 bkaankuguoglu

まあ、私が管理解決策を考え出すことができますが、そこには他にも多くのソリューションがあると確信しています。以前は明らかに欠けていた申請書を申告する必要がありました。

の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">Push the button...</p> 
     <div ng-app="MyModule" ng-controller="MyController"></div> 
     <script> 
     //------- Initialize Firebase --------------- 
     var config = { 
      apiKey: "YOUR_API_KEY", 
      authDomain: "YOUR_AUTH_DOMAIN", 
      databaseURL: "YOUR_DB_URL", 
      storageBucket: "YOUR_STORAGE_BUCKET", 
     }; 
     firebase.initializeApp(config); 
     var codeRef = firebase.database().ref('code/'); 

     //------- Application Module ---------------- 
     var app = angular.module('MyModule', []); 
     document.getElementById("demo").innerHTML = ""; 
     app.controller("MyController", ["$scope", function($scope) { 
     codeRef.on('child_added', function(data) { 
     console.log(data.val()); 
     document.getElementById("demo").innerHTML += data.val(); 
     document.getElementById("demo").innerHTML += "<br>"; 
     window.scrollBy(0,50); // scroll to make sure bottom is always visible 
     }); 
     }]); 
     </script> 
    </body> 
</html>

出典

2016-06-28 07:29:57 bkaankuguoglu

AngularJSを使用してCakePHP 3のFirebaseからデータを取得する

答えて

関連する問題