AngularJS でサービス プロパティにバインドする方法のベスト プラクティスを探しています。
AngularJS を使用して作成されたサービスのプロパティにバインドする方法を理解するために、複数の例に取り組みました。
以下に、サービス内のプロパティにバインドする方法の 2 つの例を示します。どちらも機能します。最初の例では基本的なバインディングを使用し、2 番目の例では $scope.$watch を使用してサービス プロパティにバインドしています。
サービスのプロパティにバインドするときにこれらの例のいずれかが優先されますか、それとも私が知らない別のオプションが推奨されますか?
これらの例の前提は、サービスがそのプロパティ「lastUpdated」と「calls」を 5 秒ごとに更新する必要があるということです。サービス プロパティが更新されると、これらの変更がビューに反映されます。これらの例はどちらも正常に機能します。それを行うより良い方法があるかどうか疑問に思います。
基本的なバインディング
次のコードは、ここで表示および実行できます: 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>
サービス プロパティへのバインドを解決するもう 1 つの方法は、コントローラーで $scope.$watch を使用することです。
$scope.$watch
次のコードは、ここで表示および実行できます: 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>
サービスで $rootscope.$broadcast を使用し、コントローラーで $root.$on を使用できることは承知していますが、$broadcast/$on を使用して作成した他の例では、最初のブロードキャストがコントローラーですが、ブロードキャストされる追加の呼び出しはコントローラーでトリガーされます。$rootscope.$broadcast の問題を解決する方法を知っている場合は、回答を提供してください。
しかし、前に述べたことをもう一度言いますと、サービス プロパティにバインドする方法のベスト プラクティスを知りたいと思います。
アップデート
この質問は、最初は 2013 年 4 月に尋ねられ、回答されました。2014 年 5 月に、Gil Birman が新しい回答を提供し、それを正解として変更しました。Gil Birmanの回答には賛成票がほとんどないため、この質問を読んでいる人が彼の回答を無視して、より多くの票を持つ他の回答を支持することを懸念しています. 最良の答えを決める前に、Gil Birman の答えを強くお勧めします。