Sto cercando la migliore pratica su come associare una proprietà di servizio in AngularJS.
Ho lavorato su più esempi per capire come associare le proprietà in un servizio creato utilizzando AngularJS.
Di seguito ho due esempi di come associare le proprietà in un servizio; entrambi funzionano. Il primo esempio usa i collegamenti di base e il secondo esempio usa $ scope. $ Watch per associare le proprietà del servizio
Uno di questi esempi è preferito quando si associa alle proprietà di un servizio o esiste un'altra opzione di cui non sono a conoscenza?
La premessa di questi esempi è che il servizio dovrebbe aggiornare le sue proprietà "lastUpdated" e "chiama" ogni 5 secondi. Una volta aggiornate le proprietà del servizio, la vista dovrebbe riflettere queste modifiche. Entrambi questi esempi funzionano correttamente; Mi chiedo se esiste un modo migliore per farlo.
Rilegatura di base
Il seguente codice può essere visualizzato ed eseguito qui: http://plnkr.co/edit/d3c16z
<html>
<body ng-app="ServiceNotification" >
<div ng-controller="TimerCtrl1" style="border-style:dotted">
TimerCtrl1 <br/>
Last Updated: {{timerData.lastUpdated}}<br/>
Last Updated: {{timerData.calls}}<br/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("ServiceNotification", []);
function TimerCtrl1($scope, Timer) {
$scope.timerData = Timer.data;
};
app.factory("Timer", function ($timeout) {
var data = { lastUpdated: new Date(), calls: 0 };
var updateTimer = function () {
data.lastUpdated = new Date();
data.calls += 1;
console.log("updateTimer: " + data.lastUpdated);
$timeout(updateTimer, 5000);
};
updateTimer();
return {
data: data
};
});
</script>
</body>
</html>
L'altro modo in cui ho risolto l'associazione alle proprietà del servizio consiste nell'utilizzare $ scope. $ Watch nel controller.
$ Portata. $ Orologio
Il seguente codice può essere visualizzato ed eseguito qui: http://plnkr.co/edit/dSBlC9
<html>
<body ng-app="ServiceNotification">
<div style="border-style:dotted" ng-controller="TimerCtrl1">
TimerCtrl1<br/>
Last Updated: {{lastUpdated}}<br/>
Last Updated: {{calls}}<br/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("ServiceNotification", []);
function TimerCtrl1($scope, Timer) {
$scope.$watch(function () { return Timer.data.lastUpdated; },
function (value) {
console.log("In $watch - lastUpdated:" + value);
$scope.lastUpdated = value;
}
);
$scope.$watch(function () { return Timer.data.calls; },
function (value) {
console.log("In $watch - calls:" + value);
$scope.calls = value;
}
);
};
app.factory("Timer", function ($timeout) {
var data = { lastUpdated: new Date(), calls: 0 };
var updateTimer = function () {
data.lastUpdated = new Date();
data.calls += 1;
console.log("updateTimer: " + data.lastUpdated);
$timeout(updateTimer, 5000);
};
updateTimer();
return {
data: data
};
});
</script>
</body>
</html>
Sono consapevole di poter utilizzare $ rootscope. $ Broadcast nel servizio e $ root. $ On nel controller, ma in altri esempi che ho creato che utilizzano $ broadcast / $ nella prima trasmissione non viene acquisito dal controller, ma le chiamate aggiuntive che vengono trasmesse vengono attivate nel controller. Se sei a conoscenza di un modo per risolvere il problema di $ rootscope. $ Broadcast, fornisci una risposta.
Ma per ribadire ciò che ho menzionato in precedenza, vorrei conoscere la migliore pratica su come associare le proprietà di un servizio.
Aggiornare
Questa domanda è stata originariamente posta e ha risposto ad aprile 2013. Nel maggio 2014, Gil Birman ha fornito una nuova risposta, che ho modificato come risposta corretta. Poiché la risposta di Gil Birman ha pochi voti positivi, la mia preoccupazione è che le persone che leggono questa domanda ignorino la sua risposta a favore di altre risposte con molti più voti. Prima di prendere una decisione su quale sia la risposta migliore, consiglio vivamente la risposta di Gil Birman.