7

除了许多其他问题外，这个问题显示使用控制器级别resolve来处理需要在应用程序启动之前加载的异步数据。

我有很多控制器，每个模块中都有所有单独定义的路由......如果它们都依赖于数据，那么resolve使用对我来说将是荒谬的。我也有依赖于数据的指令（自动完成搜索等）。

没有更好的方法吗：“在显示每个控制器之前加载数据（使用角度服务）”？我需要加载应用程序，异步获取数据，并且我将 ng-show 与一些显示加载或控制器模板的 rootScope 数据一起使用。我尝试将其放入app.run，但无法使其正常工作……该块中的任何异步操作似乎都会使应用程序崩溃。

帮助？

4

3 回答 3

1

我知道这个问题很老，但由于没有公认的答案，也没有一个干净的答案，我也在尝试解决这个问题。

每个应用程序缺乏解析状态让我困扰了一段时间，这是我最终想出的解决方案：http: //jsfiddle.net/gabrielcatalin/cvyq0oys/

简而言之，我创建了一个 Angular Module Enhancer(decorator)，它支持另外 2 种方法：resolve()和ready()。AngularEnhancer 片段只需要在 angular.js 加载之后和实现之前加载，如下所示：

<script type="text/javascript" src="angular.js">
<script type="text/javascript" src="angularEnhancer.js">
<script type="text/javascript" src="main.js">

这是实现的外观：

angular.module('myApp', [])
    .ready(function() {
        alert('The app is ready to be used!');
    })
    .resolve(['$q', function ($q) {
        // The resolve can wait for a promise to be resolved
        var differed = $q.defer();

        setTimeout(function() {
            differed.resolve();    
        }, 1000);

        return differed.promise;

        // Or a true value
        // return true;

        // Or even a truish value
        // return 'value';
    }])
    .ready(function() {
        // The order of where the ready() appear doesn't matter
        alert('This is just another alert to show that it can have as many as possible!');
    });

和html：

<body>
    <div ng-if="!appReady" class="splash-screen">This is just the splash screen!</div>
    <div ng-if="appReady">Welcome to the app!</div>

    <script>
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['myApp']);
        });
    </script>
</body>

希望看到大家的一些意见！

于 2014-10-16T16:36:27.283 回答
1

这就是我所做的。我不是这个解决方案的忠实拥护者，但这是迄今为止我能想到的最好的解决方案。

首先，您可以resolves在每条路线中有多个，如下所示：

resolve: {
  UserAccount: app.resolves('UserAccount'),
  Posts: app.resolves('Posts')
}

由于您无法将应用程序服务注入配置块，因此我在另一个文件中创建了一个大的旧对象，其中包含我的服务的快捷方式：

app.resolves = (function(){
  // Resolves allow us to use `deferred`s to only
  // load our template after the data it requires
  // has been provided by the server.
  var resolve = {};

  resolve.UserAccount =
  ['Users', function (Users) {
     return Users.fetchActive();
  }];

  resolve.Posts =
  ['Posts', function(Posts) {
     return Posts.getAllPosts();
  }];

  // Public API
  // @param string name
  return function (name) {
    return resolve[name]
  };
})();
于 2013-07-12T21:03:08.120 回答
0

我认为，由于没有明显的方法来进行应用程序级解析配置，因此您可以做的最好的事情实际上是$routeProvider使用装饰器修改功能。通过这种方式，您可以检查是否resolve在每个应用程序路由上设置了配置，并添加/合并一个特殊的解析承诺，该承诺将加载异步数据或继续所需数据，并在您需要时有一个中心点进行测试或修改.

我现在正在努力解决同样的问题。我将尝试在这里制作一个通用/可重用的代码，并很快在 GitHub 上发布我的解决方案。我也会尝试在这里用一个适当的例子来更新这个答案。

于 2013-10-04T03:25:29.027 回答