AngularJS bir service özelliği bağlamak için nasıl en iyi uygulama arıyorum.
AngularJS kullanılarak oluşturulan bir hizmetteki özelliklere nasıl bağlanacağını anlamak için birden çok örnek üzerinden çalıştım.
Aşağıda bir hizmetteki özelliklere nasıl bağlanılacağına dair iki örneğim var; ikisi de çalışır. İlk örnek temel bağlamaları ve ikinci örnek $ scope. $ Watch özelliğini kullanarak hizmet özelliklerine bağlanır
Bir hizmetteki özelliklere bağlanırken bu örneklerden herhangi biri tercih ediliyor mu yoksa bunun önerileceğinin farkında olmadığım başka bir seçenek var mı?
Bu örneklerin dayanağı, hizmetin “lastUpdated” ve “call” özelliklerini her 5 saniyede bir güncellemesi gerektiğidir. Hizmet özellikleri güncellendiğinde görünümün bu değişiklikleri yansıtması gerekir. Bu örneklerin ikisi de başarıyla çalışır; Bunu yapmanın daha iyi bir yolu olup olmadığını merak ediyorum.
Temel Ciltleme
Aşağıdaki kod görüntülenebilir ve burada çalıştırılabilir: 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>Hizmet özelliklerine bağlamayı çözdüğüm diğer bir yol da denetleyicide $ scope. $ Watch kullanmaktır.
$ Kapsamı. $ İzle
Aşağıdaki kod görüntülenebilir ve burada çalıştırılabilir: 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>Hizmette $ rootscope. $ Yayın ve denetleyicide $ root. $ Açık kullanabileceğimin farkındayım, ancak ilk yayında $ broadcast / $ kullanan oluşturduğum diğer örneklerde ancak ek çağrılar denetleyicide tetiklenir. $ Rootscope. $ Broadcast problemini çözmenin bir yolunu biliyorsanız, lütfen bir cevap verin.
Ancak daha önce bahsettiğim şeyi yeniden ifade etmek için, bir hizmet özelliklerine nasıl bağlanacağına dair en iyi uygulamayı bilmek istiyorum.
Güncelleme
Bu soru ilk olarak Nisan 2013'te soruldu ve cevaplandı. Mayıs 2014'te Gil Birman, doğru cevap olarak değiştirdiğim yeni bir cevap verdi. Gil Birman cevabının çok az oyu olduğu için, endişem bu soruyu okuyan insanların cevabını daha fazla oyla diğer cevaplar lehine göz ardı edeceğidir. En iyi cevabın ne olduğuna karar vermeden önce Gil Birman'ın cevabını tavsiye ederim.