javascript - 单页应用程序/对主导航栏内容的加载感到困惑

Question

我拥有一个使用 AngularJs 实现的单页面应用程序。

假设我的应用程序有 2 个页面，共享相同的主顶部导航栏。

导航栏应该显示(当然还有其他内容)当前发送给已连接用户的未读消息数，如屏幕截图所示:

在我当前的实现中，当 AngularJs 开始加载时，我在 run 方法中触发一个 ajax 查询来获取所有当前用户的消息(当然，就在查询之后，旨在检查是否任何用户都经过身份验证)。

但是，由于 $http.get 本质上是完全异步的，因此经常会出现一秒甚至两秒的延迟(最坏的情况是，如果消息很多，并且导航栏显示和消息数量更新之间的附加逻辑:

…………1秒后……

如果图标是特定的页面内容，我可以使用模板的 resolve 属性，但在这种情况下，导航栏由每个页面共享。

在查询消息时，我是否应该显示一些代表消息“负载”的图标，以通知用户可能存在某些消息？

此案如何处理？

恕我直言，这似乎是单页面应用程序的主要缺点。
事实上，在非单页应用程序中，查询可能发生在服务器端，然后再将网页发送到客户端，从而不会导致任何延迟。

Answer 1

我认为这是单页应用程序的美妙之处。它可以延迟加载，为我提供即时反馈以执行我想要的任务，而不是等待几秒钟的页面加载我可能不感兴趣的消息(在服务器上)。

我通常会使用类似这样的指令并远离 $rootScope，但听起来 ngShow/ngHide 能够直接与您的设置联系起来:

HTML/JADE (类只是一个示例)

div#messages(ng-show='messages')
  i.fa.fa-envelope-o
    span.badge {{messages.new.length}}
div#msgLoading(ng-hide='messages')

Javascript/Angular

.run(function($rootScope, $http, ...
  ...
  //$rootScope.messages has not been instantiated yet
  $http.get('//someendpoint').then(function(results) {
    $rootScope.messages = results.data;
  });
  ...