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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在ui-router resolve属性中使用ocLazyLoad解析文件相关的知识,希望对你有一定的参考价值。

我想通过使用ui-router resolve属性来查看api调用,然后我的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();
      }]
    }
});

谢谢!

答案

路线解析器与$q.all并行解决。由于$ocLazyLoad.load(...)是异步的,因此在调用searches时肯定无法完成。

$ocLazyLoad.load(...)返回一个可以链接的承诺,以避免竞争条件,例如:

  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();
  }

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

以上是关于如何在ui-router resolve属性中使用ocLazyLoad解析文件的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ui-router 解析器中重定向?

如何动态更改ui-router使用的默认状态?

(Angular-ui-router) 在解析过程中显示加载动画

将ui-router解析注入指令

我应该如何在 Angular ui-router 中创建 templateUrl 属性的路径?

AngularJS:ui-router解析后无法访问控制器中的变量