AngularJS - 利用serivce /控制器模型，爲所有客戶

我是相當新的AngularJS，雖然我通常喜歡通過我的麻煩帶到工作中創建全局計時器，我感覺好像我是缺少客戶端/服務器編程的一個基本概念AngularJS。AngularJS - 利用serivce /控制器模型，爲所有客戶

目前我想只得到一個非常基本的應用程序的工作爲理念，爲自己證明。在這個應用程序，我想有一個計時器，只是從一個設定的時間倒計時（在這個例子說，2分鐘），然後重新啓動。雖然我有定時器邏輯的工作，我試圖擁有定時器是全球性的，這樣誰連接任何客戶端，將看到相同的倒計時誰開始它的用戶，當遇到麻煩。

從最初的研究，我認爲最好的辦法做到這一點是通過服務，如下圖所示：

var myApp = angular.module('countdownTimer', []); 
 

 

 
myApp.service('timerService',['$http', function($http){ 
 
\t var time = 180; 
 
\t 
 
\t return { 
 
\t \t getTime: getTime, 
 
\t \t setTime: setTime 
 
\t }; 
 
\t 
 
\t function getTime(){ 
 
\t \t return time; 
 
\t } 
 
\t function setTime(value){ 
 
\t \t time = value; 
 
\t } 
 
}]); 
 

 
myApp.controller('CounterController', ['$timeout','$scope', 'timerService', function($timeout, $scope, timerService){ 
 
\t /**$scope.counter = 180; 
 
\t **/ 
 
\t var date = new Date(null); 
 
\t date.setSeconds(timerService.getTime()); 
 
\t $scope.time_format = date.toISOString().substr(14,5); 
 
\t 
 
\t 
 
\t $scope.onTimeout = function() { 
 
\t \t timerService.setTime(timerService.getTime()-1); 
 
\t \t var date = new Date(null); 
 

 
\t \t date.setSeconds(timerService.getTime()); 
 
\t \t $scope.time_format = date.toISOString().substr(14,5); 
 
\t \t if (timerService.getTime() > 0){ 
 
\t \t \t mytimeout = $timeout($scope.onTimeout, 1000); 
 
\t \t \t 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t 
 
\t \t \t //$scope.counter = 180; 
 
\t \t \t timerService.setTime(180); 
 
\t \t \t date.setSeconds(timerService.getTime()); 
 
\t \t \t mytimeout = $timeout($scope.onTimeout, 1000); 
 
\t \t } 
 
\t } 
 
\t $scope.start = function(){ 
 
\t \t var mytimeout = $timeout($scope.onTimeout,1000); \t 
 
\t } 
 
\t 
 
\t $scope.stop = function(){ 
 
\t \t $timeout.cancel(mytimeout); 
 
\t } 
 
\t 
 
\t 
 
}]);

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title> Example </title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
\t <script src="app.js"></script> 
 
\t 
 
</head> 
 
\t 
 
<body data-ng-app="countdownTimer"> 
 
\t <div data-ng-controller="CounterController"> 
 
\t \t {{time_format}} 
 
\t \t <button data-ng-click="stop()">Pause</button> 
 
\t \t <button data-ng-click="start()">Start</button> 
 
\t </div> 
 
\t </body> 
 
</html>

然而，當我打開多個選項卡上的瀏覽器和連接到這一切，他們都開始在不同的地點，而不是一個全球控制的計時器我相信這是非常明顯的，但作爲一個新角度/網絡開發的人，我很茫然。

來源

2017-07-18 sudobangbang

如果您希望定時器是從多個客戶端訪問，並保持同步，你需要有計時器在服務器上的管理，然後讓客戶端查詢它的剩餘時間（或使用的WebSocket讓服務器知道多少時間剩餘的客戶端）。 – mcgraphix

這應該在您的服務得以控制

var date = new Date(null);

更新您的服務爲

myApp.service('timerService',['$http', function($http){ 
    var time = 180; 


    this.getTime = function(){ 
     return time; 
    } 
    this.setTime = function(value){ 
     time = value; 
    } 
}]);

來源

2017-07-18 14:06:43

感謝您的快速回答，我已經更新了我的服務爲你建議。但是我仍然注意到它似乎是兩個獨立的計時器實例。我打開一個標籤並啓動它，然後是第二個應用程序，看起來它們都是獨立運行的，而不是同時運行。建議？ – sudobangbang

角度服務返回服務功能的單個實例，因此您可能會遇到某種不同的問題。你可以與plunkr分享嗎？ –

https://plnkr.co/edit/jsMz9ZvnjXBqBnQIBwH5?p=preview – sudobangbang

AngularJS - 利用serivce /控制器模型，爲所有客戶

回答

相關問題