使用AngularJS从CakePHP 3中的Firebase检索数据

Question

我一直致力于使用CakePHP 3构建的Web应用程序，该应用程序在Firebase的实时数据库中存储文本行。 一旦在控制器的一个端点接收到请求，它就开始将数据推送到数据库。 与此同时，我希望看到这些文本行逐一显示在页面上。

到目前为止，我已经可以处理请求流程，现在我可以将数据发送到我的网页。 我可以跟踪从浏览器和html输出的控制台发送的文本。 但是，我坚持在前端安装AngularJS，所以对这个主题的任何帮助都将不胜感激。

由于现在的情况，由于我无法构建AngularJS，当我使用下面的行时，我在页面上看不到任何更改：

document.getElementById("demo").innerHTML = data.val();

由于网上有很多文档，大部分是过时的，我很难找到可以使用的有用信息。 我真的很感激你的帮助。

src / Template / Visits / 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 / Template / Layout / 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>

Answer 1

好吧，我设法提出了一个解决方案，但我确信还有很多其他解决方案。 需要声明该应用程序，之前显然已经丢失了。

src / Template / Visits / 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>

使用AngularJS从CakePHP 3中的Firebase检索数据

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-28 07:29:57

使用AngularJS从CakePHP 3中的Firebase检索数据

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-28 07:29:57

解决方案1
0 已采纳 2016-06-28 07:29:57