2016-06-24 4 views
1

저는 Firebase의 실시간 데이터베이스에 텍스트 줄을 저장하는 CakePHP 3을 사용하여 빌드 된 웹 응용 프로그램에서 작업했습니다. 컨트롤러의 끝점 중 하나에서 요청을 받자 마자 데이터를 데이터베이스로 밀어 넣기 시작합니다. 그 동안 나는 한 줄씩 페이지에 표시 할 텍스트 줄을보고 싶습니다.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> 

답변

0

글쎄, 난 관리 솔루션을 찾으려면 나와 있지만 다른 솔루션도 많이 나와 있습니다. 이전에 분명히 없었던 신청서를 신고해야했습니다.

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> 
관련 문제