Question

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

页面A显示：
1）大倒数计时器
2）重置倒计时时间的按钮
3）在新窗口/标签中打开另一页面A的链接< / p>

这个想法是你可以在不同的标签页中打开多个页面A，并且它们之间显示的倒计时时间都是同步的（即绑定到同一个资源实例）。单击该按钮可重置任何页面A的倒计时时间，将重置所有倒计时时间。希望避免使用cookie或持久存储。

有人能展示一个使用AngularJS做到这一点的最佳方法的例子吗？

非常感谢。

编辑：我知道AngularJS适用于单页应用。我基本上要问的是，如果有意义，是否有办法给出多页面应用程序的错觉。真正的诀窍：即使重新加载页面A，有没有办法保留计时器同步？

Answer 1

在我看来。

您可以创建服务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>

AngularJS跨页面共享资源

1 个答案: