Angular.JS Spegnere due chiamate di servizio asincrono, quindi eseguire un'azione dopo aver completato entrambi

Question

Sto ancora avvolgendo il mio cervello intorno a Angular.JS.

Ho due chiamate $ http indipendenti che recuperano i dati dai servizi Web remoti. Ho un'azione che desidero attivare dopo che entrambe le chiamate di assistenza sono state completate.

1. La prima chiamata di servizio popola il $ scope.model
2. La seconda chiamata di servizio, modifica i dati nel $ scope.model (aggiunge alcune proprietà di contatori sono resi nella vista)

Un altro requisito univoco è che alla fine la seconda chiamata di servizio verrà richiamata e aggiornata all'esterno del controller con $ scope.model. È una pompa per i messaggi di notifica.

Sto supponendo che userò promesse $ q e possibilmente $ servizio, ma non sono davvero sicuro da dove iniziare per qualcosa di simile seguendo alcune best practice.

So che non sembra che le chiamate asincrone siano appropriate qui, poiché il mio esempio potrebbe essere semplificato facendolo in modo sincrono. Tuttavia, la seconda chiamata di servizio è un aggiornamento della notifica, quindi verrà continuamente interrogato sul server (eventualmente verrà utilizzato un websocket).

È uno schema comune che vedrò in questa applicazione.

Answer 1

Ti consigliamo di utilizzare $ q promette In particolare $ q.all(). Tutti i metodi $ http restituiranno promesse. $q.all([promise, promise, promise]).then(doSomething) attenderà che tutte le promesse si risolvano, quindi chiama doSomething passando ad esso un array di risultati promessi.

app.service('myService', ['$http', '$q', function($http, $q) { 
    return { 
     waitForBoth: function() { 
      return $q.all([ 
      $http.get('/One/Thing'), 
      $http.get('/Other/Thing') 
      ]); 
     }; 
    } 
}]); 

Poi lo chiamano:

app.controller('MyCtrl', ['$scope', 'myService', function($scope, myService) { 
    myService.waitForBoth().then(function (returnValues){ 
     var from1 = returnValues[0].data; 
     var from2 = returnValues[1].data; 
     //do something here. 
    }); 
}]); 

Ecco una dimostrazione Plunker per voi.

Answer 2

Creare un servizio per la prima chiamata di servizio. La risposta di Pete aiuterà con che: https://stackoverflow.com/a/12513509/215945

nel controller, nel callback allora(), aggiungere un orologio $ per la proprietà $ scope.model appropriata:

app.controller('MainCtrl', function(myService, $scope) { 
    myService.async().then(function(myData) { 
    $scope.model = myData; 
    $scope.$watch('model.???', function(newVal, oldVal) { 
     if(newVal !== oldVal) { 
     // do something here, now that $scope.model.??? has changed 
     } 
    }) 
    }); 
});