UI 路由器子解决延迟父加载

Question

子状态的解析正在延迟父状态的加载

我的状态配置为：

$stateProvider
          .state('a', {
            url: '/a/:aid',
            controller: 'ACtrl',
            templateUrl: 'a.html'
          })
          .state('a.b', {
            url: '/b/:bid',
            controller: 'BCtrl',
            templateUrl: 'b.html',
            resolve: {
              DataService: 'DataService',
              data: function(DataService) {
                return DataService.getData(); //Returns a http promise
              }
            }
          });

index.html:

<nav>
  ....
</nav>
<div ui-view></div>

a.html 有：

<sidebar>
...
</sidebar>
<div ui-view></div>

b.html 有：

<div ng-repeat="d in data">{{ d }} </div>

当我点击 url http://example.com/a/1/b/1 a.html 时不会立即加载。 我似乎状态“a”正在等待子状态“a.b”的解析完成。

我想要做的是加载 a.html（显示侧边栏和一个空的 div）可能带有加载图标，而子状态解决其依赖关系。 [编辑] 请注意，我的状态“a”没有解析，但它仍在等待其子项解析。我想主要避免这种情况

一旦所有内容都加载完毕，当我更改 bid 时，我希望它在孩子解析新数据时再次显示加载图标。

这是我第一次发布问题，所以如果我不够清楚，请提前道歉。

Answer 1

加载顺序

当您直接访问子级时，Ui-router 首先加载父级，然后是子级。请从你的萤火虫那里检查一下。

在你的情况下，以下是顺序

• a.html
• a.b 解析过程（XHR 请求）
• a.b.html

用于显示加载图片

方法 1

你可以试试angular-loading-bar 模块。它在处理 XHR 请求时管理页面中显示/隐藏加载的问题。此加载图像将显示在浏览器顶部。

这个想法很简单：每当 XHR 出现时添加一个加载条/进度条 请求以角度发出。同一时间内的多个请求 period 捆绑在一起，这样每个响应都会增加 适当数量的进度条。

这很酷，因为您只需将它包含在您的应用中，然后 作品。没有复杂的设置，也不需要维护状态 加载条；这一切都由拦截器自动处理。

方法 2

如果你想根据屏幕在特定位置显示加载图像，你需要通过你的控制器使用ng-show/ng-hide来处理它