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

Question

I've been working on a web application, built by using CakePHP 3, that stores lines of text in Firebase's realtime database. 我一直致力于使用CakePHP 3构建的Web应用程序，该应用程序在Firebase的实时数据库中存储文本行。 It starts pushing the data to the database as soon as a request is received at one of the end points of the controller. 一旦在控制器的一个端点接收到请求，它就开始将数据推送到数据库。 In the meantime I'd like to see those lines of text to be displayed on the page one by one. 与此同时，我希望看到这些文本行逐一显示在页面上。

So far, I've made it possible to deal with the request process and now I can send the data to my web page. 到目前为止，我已经可以处理请求流程，现在我可以将数据发送到我的网页。 I could follow the text being sent both from console on the browser and html outputs. 我可以跟踪从浏览器和html输出的控制台发送的文本。 However, I'm stuck with installing AngularJS on the front end, so any help on this very topic will be appreciated. 但是，我坚持在前端安装AngularJS，所以对这个主题的任何帮助都将不胜感激。

As the things stands now, since I couldn't built AngularJS, I cannot see any changes on my page when I use the line below: 由于现在的情况，由于我无法构建AngularJS，当我使用下面的行时，我在页面上看不到任何更改：

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

Since there are many documentations, mostly outdated, on the web, I'm having quite hard time finding the useful information that I can use. 由于网上有很多文档，大部分是过时的，我很难找到可以使用的有用信息。 I'd really appreciate any help on this. 我真的很感激你的帮助。

src/Template/Visits/code.ctp : 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 : 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

Well, I managed to come up with a solution but I'm sure that there are many other solutions out there. 好吧，我设法提出了一个解决方案，但我确信还有很多其他解决方案。 It was needed to declare the application, which was obviously missing before. 需要声明该应用程序，之前显然已经丢失了。

src/Template/Visits/code.ctp : 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