AngularJS：如何进行视图的初始化，直到我们从服务获得响应？

Question

我们有一个AngularJS应用，其中有多个状态，这些状态由ui-router定义。在这些状态之一中，我们需要等待HTML初始化，直到服务响应为止。

通常，我们将应用程序设计为使所有服务调用异步运行，并且视图在相关位置上显示加载微调器。但是在这种状态下，我们真的应该/不应该向用户显示任何内容，直到服务响应为止。

我如何定义此状态，以便仅在服务响应后才初始化视图？

我们的状态和组件定义非常简单：

.state(STATES.details,
  {
    url: "/?ref",
    template: '<app-details></app-details>',
  })

...

.component('details', {
    controller: 'DetailsController as detailsController',
    templateUrl: 'module/details.html'
  }
)

Answer 1

在这种情况下使用resolve https://github.com/angular-ui/ui-router/wiki#resolve：

如果这些依赖项中的任何一个都是promise，它们将在实例化控制器和触发$ stateChangeSuccess事件之前被解析并转换为值。

.state(STATES.details,
{
    url: "/?ref",
    template: '<app-details></app-details>',

    resolve:{

     // Example using function with returned promise.
     // This is the typical use case of resolve.
     // You need to inject any services that you are
     // using, e.g. $http in this example
     promiseObj:  function($http){
        // $http returns a promise for the url data
        return $http({method: 'GET', url: '/someUrl'});
     }

})

Answer 2

您需要查看使用解决方法。它可以做您需要的工作，等待一个（或多个）i完成后再加载：https://github.com/angular-ui/ui-router/wiki#resolve