如何在ui-router resolve 属性中使用ocLazyLoad解析文件

Question

我想在视图之前解决一个 api 调用，通过使用 ui-router resolve 属性显示它很简单，但我的解决属性依赖于 ocLazyLoad 解决的文件。所以，我收到此错误 Error: [$injector:unpr] Unknown provider: SavedFactoryProvider <- SavedFactory

这是我的代码

$stateProvider.state('app.saved', {
    url: '/saved',
    templateUrl: 'app/modules/saved/views/saved.html',
    controller: 'SavedSearchCtrl',
    resolve: {
      loadFiles: ['$ocLazyLoad', function($ocLazyLoad) {
        return $ocLazyLoad.load([{
          name: 'app.saved',
          files: [
            'app/modules/saved/controller.js',
            'app/modules/saved/factory.js',
          ],
          cache: false
        }]);
      }],
      searches: ['loadFiles', 'SavedFactory', function(loadFiles, SavedFactory) {
        return SavedFactory.getSavedSearches();
      }]
    }
});

谢谢！

Answer 1

路由解析器与 $q.all 并行解析。由于$ocLazyLoad.load(...)是异步的，肯定不会在调用searches的那一刻完成。

$ocLazyLoad.load(...) returns 可以链接的 promise 以避免竞争条件，例如：

  searches: function($ocLazyLoad, $injector) {
    return $ocLazyLoad.load([
      {
        name: 'app.saved',
        files: [
          'app/modules/saved/controller.js',
          'app/modules/saved/factory.js',
        ],
        cache: false
      }
    ])
    .then(function () {
      var SavedFactory = $injector.get('SavedFactory');
      return SavedFactory.getSavedSearches();
    });
  }

与 ngRoute 不同，UI 路由器支持层次结构的解析器；依赖关系图是建立在状态变化的基础上的。它们的解析顺序可以由它们的依赖关系决定。所以 searches 应该将 loadFiles 列为它的依赖项：

  searches: function(loadFiles, $injector) {
    var SavedFactory = $injector.get('SavedFactory');
    return SavedFactory.getSavedSearches();
  }

$injector.get 显然是必要的，因为 UI 路由器如何在内部调用解析器函数。

如何在ui-router resolve 属性中使用ocLazyLoad解析文件

How to use ocLazyLoad resolved file in ui-router resolve property

angularjs

angular-ui-router

oclazyload