Verwenden von AngularJS zum Abrufen von Daten aus Firebase in CakePHP 3

Ich habe an einer Webanwendung gearbeitet, die mit CakePHP 3 erstellt wurde und Textzeilen in Firebases Echtzeitdatenbank speichert. Sobald eine Anforderung an einem der Endpunkte des Controllers empfangen wird, werden die Daten in die Datenbank übertragen. In der Zwischenzeit würde ich gerne sehen, dass diese Textzeilen auf der Seite nacheinander angezeigt werden.Verwenden von AngularJS zum Abrufen von Daten aus Firebase in CakePHP 3

Bisher habe ich es möglich gemacht, den Anfrageprozess zu bearbeiten und jetzt kann ich die Daten an meine Webseite senden. Ich konnte den gesendeten Text sowohl von der Konsole im Browser als auch von den HTML-Ausgaben verfolgen. Ich bin jedoch mit der Installation von AngularJS am Frontend beschäftigt, daher wird jede Hilfe zu diesem Thema sehr geschätzt.

Wie die Dinge steht jetzt, da ich AngularJS nicht gebaut, konnte ich keine Änderungen auf meiner Seite sehen, wenn ich die folgende Zeile verwenden:

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

Da es viele Dokumentationen sind meist veraltet, auf Im Internet finde ich es ziemlich schwierig, die nützlichen Informationen zu finden, die ich verwenden kann. Ich würde mich über jede Hilfe freuen.

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

Quelle

2016-06-24 bkaankuguoglu

Nun gelang es mir, um eine Lösung zu finden, aber ich bin mir sicher, dass es viele andere Lösungen gibt. Es war notwendig, die Anmeldung zu erklären, die vorher offensichtlich fehlte.

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

Quelle

2016-06-28 07:29:57 bkaankuguoglu

Verwenden von AngularJS zum Abrufen von Daten aus Firebase in CakePHP 3

Antwort

Verwandte Themen