Szukam najlepszych praktyk tworzenia powiązań z usługą w AngularJS.
Omówiłem wiele przykładów, aby zrozumieć, jak powiązać właściwości w usłudze utworzonej za pomocą AngularJS.
Poniżej mam dwa przykłady powiązania z właściwościami w usłudze; oboje pracują. W pierwszym przykładzie zastosowano podstawowe powiązania, a w drugim użyto $ scope. $ Watch do powiązania z właściwościami usługi
Czy któryś z tych przykładów jest preferowany podczas tworzenia powiązania z właściwościami w usłudze, czy też jest zalecana inna opcja, o której nie wiem?
Założeniem tych przykładów jest to, że usługa powinna aktualizować swoje właściwości „lastUpdated” i „call” co 5 sekund. Po zaktualizowaniu właściwości usługi widok powinien odzwierciedlać te zmiany. Oba te przykłady działają pomyślnie; Zastanawiam się, czy jest na to lepszy sposób.
Podstawowe wiązanie
Poniższy kod można wyświetlić i uruchomić tutaj: 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>Innym sposobem, w jaki rozwiązałem powiązanie z właściwościami usługi, jest użycie $ scope. $ Watch w kontrolerze.
$ scope. $ watch
Poniższy kod można wyświetlić i uruchomić tutaj: 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>Zdaję sobie sprawę, że mogę użyć $ rootscope. $ Broadcast w usłudze i $ root. $ On w kontrolerze, ale w innych przykładach, które utworzyłem, używających $ broadcast / $ w pierwszej transmisji nie jest przechwytywane przez kontroler, ale dodatkowe wywołania, które są transmitowane, są wyzwalane w kontrolerze. Jeśli znasz sposób rozwiązania problemu z emisją $ rootscope. $, Podaj odpowiedź.
Ale aby powtórzyć to, o czym wspomniałem wcześniej, chciałbym poznać najlepsze praktyki tworzenia powiązań z właściwościami usługi.
Aktualizacja
To pytanie zostało pierwotnie zadane i udzielono na nie odpowiedzi w kwietniu 2013 r. W maju 2014 r. Gil Birman udzielił nowej odpowiedzi, którą zmieniłem jako poprawną. Ponieważ odpowiedź Gila Birmana ma bardzo mało głosów pozytywnych, obawiam się, że ludzie czytający to pytanie zignorują jego odpowiedź na rzecz innych odpowiedzi, które otrzymają znacznie więcej głosów. Zanim podejmiesz decyzję o najlepszej odpowiedzi, gorąco polecam odpowiedź Gila Birmana.