Javascript AngularJS跨页面共享资源

下面是我想制作的应用程序的简化形式，但我不确定AngularJS是否适合

页面A显示：
1）一个大的倒计时计时器
2）一个重置倒计时时间的按钮
3）一个在新窗口/选项卡中打开另一页面A的链接

其思想是，您可以在不同的选项卡中打开多个页面A，并且所有页面上显示的倒计时时间都是同步的（即绑定到同一资源实例）。从任何页面A单击按钮重置倒计时时间将重置所有倒计时时间。希望避免使用cookie或持久存储

有人能举例说明AngularJS的最佳方法吗

非常感谢

编辑：我知道AngularJS适用于单页应用程序。我本质上想问的是，是否有一种方法可以让人产生多页应用程序的错觉，如果这是有意义的话。真正的诀窍是：有没有办法在重新加载页面a的情况下保持计时器同步？

您可以创建服务MultiPageDataProvider并使用WebSocket进行同步。 您必须始终通过服务在控制器之间传递数据。 在这个场景中，您不能将rootScope用于您试图实现的目标（但这是离题的）

这是原始用法，您可以将解决方案封装在服务中（MultiPageDataProvider）

{{data}}


angular.module（'您的应用程序'[
'ngWebSocket'//如果您愿意，也可以使用'angular websocket'
])
//WebSocket也可以工作
.factory（'MyData'，函数（$websocket）{
//打开WebSocket连接
var dataStream=$websocket（'wss://website.com/data');
var集合=[]；
onMessage（函数（消息）{
collection.push（JSON.parse（message.data））；
});
var方法={
收藏：收藏，
get:function（）{
send（JSON.stringify（{action:'get'}））；
}
};
返回方法；
})
.controller（'SomeController'，函数（MyData）{
$scope.MyData=MyData；
});

你似乎忽略了AngularJS应用程序的要点。它的作用是作为一个1页的应用程序。一旦在另一个选项卡中打开另一个页面，它就不再遵循该主规则。如果所有内容都在一个窗口内打开，那么您可以使用$broadcast或$emit来执行所需操作。@austindeveloper在多个窗口中打开SPA有什么问题？Ray-可以使用PostMessageAPI在windows或WebSocket之间通信和传递数据，以保持实时同步

      <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>