0

Realizo una consulta a un archivo .json y con la respuesta hago una tabla pero debido a que el archivo .json se actualiza constantemente, necesito estar observando si ese archivo ha cambiado para mostrarlo en tiempo real en la aplicacion, y he intentado pero no consigo el two way data binding.

app.js

(function(){
var myapp = angular.module("appMonitor",[]);


myapp.factory('myService', function($http,$timeout) {
  var promise;
  var myService = {
    get: function() {
      if ( !promise ) {
        // $http returns a promise, which has a then function, which also returns a promise
        promise = $http.get('./json/verifyEmpty.json').then(function (response) {
          // The then function here is an opportunity to modify the response
          console.log(response.data);
          // The return value gets picked up by the then in the controller.
          return response.data;
        });
      }
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});


myapp.controller('monitorCtrl', function(myService,$scope) {
    // Call the async method and then do stuff with what is returned inside our own then function
    myService.get().then(function(d) {
      $scope.response = d;
    });
});

})();

verifyEmpty.json

[
 {
"name":"luis",
"lastname":"perez",
"age":27,
"gender":"m",
"haircolor":"yellow",
"eyecolor":"brown",
"student":false
 },
 {
"name":"monse",
"lastname":"chuang",
"age":28,
"gender":"f",
"haircolor":"black",
"eyecolor":"black",
"student":true
 },
 {
"name":"sarah",
"lastname":"lee",
"age":29,
"gender":"f",
"haircolor":"yellow",
"eyecolor":"green",
"student":true
 },
 {
"name":"luisa",
"lastname":"ortega",
"age":28,
"gender":"f",
"haircolor":"black",
"eyecolor":"blue",
"student":false
 },
 {
"name":"diana",
"lastname":"garcia",
"age":27,
"gender":"f",
"haircolor":"brown",
"eyecolor":"brown",
"student":true
 }
]

monitor.php

<body ng-app="appMonitor">
<div class="" ng-controller="monitorCtrl">
  <table>
    <tr>
      <th><strong>name</strong></th>
      <th><strong>lastname</strong></th>
      <th><strong>age</strong></th>
      <th><strong>gender</strong></th>
      <th><strong>haircolor</strong></th>
      <th><strong>eyecolor</strong></th>
      <th><strong>student?</strong></th>
  </tr>

    <tr ng-repeat="r in response" ng-cloak>
      <td>{{r.name}}</td>
      <td>{{r.lastname}}</td>
      <td>{{r.age}}</td>
      <td>{{r.gender}}</td>
      <td>{{r.haircolor}}</td>
      <td>{{r.eyecolor}}</td>
      <td ng-show="r.student">Yes</td>
  </tr>


  </table>
  <!-- {{response}} -->
</div>
<script type="text/javascript" src="./js/148libraries/angular.min.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</body>
0

1 respuesta 1

3

No veo que el two way data binding tenga relacion con el planteo que realizas.

En realidad lo que debes implementar es un server push que informe al cliente cuando cambia algo en el servidor.

La verdad es que no conozco mucho de php, pero quizas librerias como ser

http://socketo.me/

podrian ayudar

La idea es que con codigo servidor detectes cuando el archivo cambia y envies una notificacion al cliente mediente WebSocket para que angular realice un nuevo $http y recupere el json actualizado

saludos

4
  • Tienes razón, lo que falta es que el servidor esté monitorizando los cambios en el archivo y envíe una notificación al cliente por websockets. En .NET tenemos SignalR y buscando para php he encontrado este interesante artículo "Building Realtime Web Apps with PHP" entwickler.de/webandphp/…. Saludos
    – rsciriano
    Commented el 27 ene. 2016 a las 21:36
  • y con angularjs no sera posible? o quizas con nodejs? Commented el 27 ene. 2016 a las 21:37
  • Recuerda que angular ejecuta del lado del cliente, mientras que el monitoreo del archivo y la notificacion esta del lado del servidor. Podrias hacerlo solo con angular si defines un timer y cada cierto tiempo realizas un nuevo $http para recuperar la actualizacion del json. Si lo quieres realizar en tiempo real necesites de WebSocket Commented el 27 ene. 2016 a las 23:04
  • @GustavoContreras claro que es posible! aqui tienes un bonito material para que revises html5rocks.com/en/tutorials/frameworks/angular-websockets asi como dijo Leandro La idea es que con codigo servidor detectes cuando el archivo cambia y envies una notificacion al cliente mediente WebSocket para que angular realice un nuevo $http y recupere el json actualizado Dale con fe! exitos en el desarrollo, bendiciones
    – fredyfx
    Commented el 27 ene. 2016 a las 23:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.