javascript - 首先加载标题，然后等待加载 Angular 应用程序中的主要内容

Question

我有一个标准的网站，布局如下(请原谅我出色的艺术技巧!))

|-------------------|
|   HEADER          |
|___________________|

|------||-----------|
| side ||  Main     |
| bar  ||  Content  |
|      ||           |
|------||------------   

我正在使用 Angular UI 路由器进行路由和状态。这是使用解析器加载特定状态的数据。如果我导航到某个状态，首先会加载所有数据，然后所有 3 个主要组件会同时出现。通常，标题/侧栏加载速度非常快，而主要内容需要更多时间。

是否可以以某种方式显示它们按顺序出现:

1. 标题
2. 侧边栏
3. 主要内容

此外，优选地，主要内容还包括加载器。我的第一个想法是将代码放在 Controller 中而不是作为解析器，但我认为解析器方式要优雅得多。

Answer 1

您可以使用 Angular 延迟来创建 promise 并组织代码，使用 Angular 延迟您可以在显示某些内容后调用方法。

you can see the documentation here

例如:

var showheader=function()
{
  var defer=$q.defer();
     //do your stuff
     //show your header
  defer.resolve();
  return defer.promise;
}
showheader().then(function(){
    //show your main and sidebar  
});