Estou procurando a melhor prática de como vincular a uma propriedade de serviço no AngularJS.
Eu trabalhei com vários exemplos para entender como vincular às propriedades em um serviço criado usando o AngularJS.
Abaixo, tenho dois exemplos de como vincular às propriedades em um serviço; ambos trabalham. O primeiro exemplo usa ligações básicas e o segundo exemplo usa $ scope. $ Watch para vincular às propriedades do serviço
Um destes exemplos é preferido ao vincular propriedades em um serviço ou há outra opção que eu não saiba que seria recomendada?
A premissa desses exemplos é que o serviço deve atualizar suas propriedades "lastUpdated" e "calls" a cada 5 segundos. Depois que as propriedades do serviço são atualizadas, a exibição deve refletir essas alterações. Ambos os exemplos funcionam com sucesso; Gostaria de saber se existe uma maneira melhor de fazê-lo.
Ligação básica
O código a seguir pode ser visualizado e executado aqui: 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>A outra maneira de resolver a ligação às propriedades de serviço é usar $ scope. $ Watch no controlador.
$ scope. $ watch
O código a seguir pode ser visualizado e executado aqui: 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>Estou ciente de que posso usar $ rootscope. $ Broadcast no serviço e $ root. $ On no controlador, mas em outros exemplos que criei que usam $ broadcast / $ na primeira transmissão não são capturados pelo controlador, mas as chamadas adicionais transmitidas são acionadas no controlador. Se você conhece uma maneira de resolver o problema de transmissão $ rootscope. $, Forneça uma resposta.
Mas, para reafirmar o que mencionei anteriormente, gostaria de conhecer as melhores práticas de como vincular a propriedades de um serviço.
Atualizar
Esta pergunta foi originalmente feita e respondida em abril de 2013. Em maio de 2014, Gil Birman forneceu uma nova resposta, que mudei como a resposta correta. Como a resposta de Gil Birman tem muito poucos votos positivos, minha preocupação é que as pessoas que leem essa pergunta desconsiderem sua resposta em favor de outras respostas com muito mais votos. Antes de tomar uma decisão sobre qual é a melhor resposta, recomendo vivamente a resposta de Gil Birman.