AngularJS跨頁面共享資源

下面是我想做的應用程序的簡化形式，但我不確定AngularJS是否適合它。AngularJS跨頁面共享資源

網頁A顯示：
1）一個大的倒數計時器
2）一個按鈕重置倒計時時間
3）鏈接在新窗口中打開另一個網頁A /標籤

的想法是可以在不同的選項卡中打開多個頁面A，並且在它們之間顯示的倒計時時間全部同步（即綁定到相同的資源實例）。點擊按鈕重置任何頁面A的倒計時時間將重置所有倒計時。希望避免使用cookie或持久性存儲。

有人可以展示一個用AngularJS做這件事的最好方法的例子嗎？

非常感謝。

編輯：我知道AngularJS是爲單頁應用程序。我基本上要問的是，如果這是有道理的，是否有辦法給出多頁面應用程序的錯覺。而對於真正的訣竅：即使頁面A重新加載，是否有保留定時器同步的方法？

2015-05-04 Ray Zhang

看起來好像你錯過了AngularJS應用程序的要點。它的目的是作爲一個1頁的應用程序。一旦另一個頁面在另一個選項卡中打開，它就不再遵循該主規則。如果一切都在一個窗口內打開，那麼你可以使用$ broadcast或$ emit來做你想做的事。 – austinthedeveloper

@austinthedeveloper在多個窗口中打開SPA有什麼問題？ Ray - 可以使用postMessage API在窗口之間進行通信和傳遞數據，或者使用websockets實現實時同步 – charlietfl

在我看來。

您可以創建一個服務MultiPageDataProvider並使用websockets https://github.com/gdi2290/angular-websocket進行同步。您必須始終通過服務在控制器之間傳遞數據。在這種情況下，您不能使用rootScope來實現您想要實現的目標（但這是無關緊要的）。

這是原始用法，您可以將您的解決方案封裝在一個服務（MultiPageDataProvider）中。

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
    <script src="bower_components/angular-websocket/angular-websocket.js"></script> 
    <section ng-controller="SomeController"> 
    <ul> 
     <li ng-repeat="data in MyData.collection track by $index"> 
     {{ data }} 
     </li> 
    </ul> 
    </section> 
    <script> 
    angular.module('YOUR_APP', [ 
     'ngWebSocket' // you may also use 'angular-websocket' if you prefer 
    ]) 
    //       WebSocket works as well 
    .factory('MyData', function($websocket) { 
     // Open a WebSocket connection 
     var dataStream = $websocket('wss://website.com/data'); 

     var collection = []; 

     dataStream.onMessage(function(message) { 
     collection.push(JSON.parse(message.data)); 
     }); 

     var methods = { 
     collection: collection, 
     get: function() { 
      dataStream.send(JSON.stringify({ action: 'get' })); 
     } 
     }; 

     return methods; 
    }) 
    .controller('SomeController', function (MyData) { 

     $scope.MyData = MyData; 
    }); 
    </script>

來源

2015-05-04 15:21:05

AngularJS跨頁面共享資源

回答

相關問題