角度UI路由器中的延迟加载模板和控制器

一尘不染

角度UI路由器中的延迟加载模板和控制器

angularjs

我试图在UI-Router router.js文件中延迟加载控制器和模板，但是在模板处理上遇到困难。

控制器已正确加载，但是在加载之后，我们必须加载模板，这就是问题所在。

ocLazyLoad加载控制器后，我们解析了一个Angular
Promise，它也包含在templateProvider中。问题在于，在文件加载完成后，不是返回诺言（templateDeferred.promise），而是将诺言作为对象返回。

.state('log_in', {
    url: '/log-in',
    controller: 'controllerJsFile',
    templateProvider: function($q, $http) { 
      var templateDeferred = $q.defer();

        lazyDeferred.promise.then(function(templateUrl) {
        $http.get(templateUrl)
        .success(function(data, status, headers, config) {
            templateDeferred.resolve(data);
        }).
        error(function(data, status, headers, config) {
            templateDeferred.resolve(data);
        });
  });
  return templateDeferred.promise;
 },
 resolve: {
    load: function($templateCache, $ocLazyLoad, $q) {
        lazyDeferred = $q.defer();

        var lazyLoader = $ocLazyLoad.load ({
          files: ['src/controllerJsFile']
        }).then(function() {
          return lazyDeferred.resolve('src/htmlTemplateFile');
        });
        return lazyLoader;
    }
 },
 data: {
  public: true
 }
})

阅读 219

2020-07-04

共1个答案

一尘不染

好的，谢谢您的答复，但我已经弄清楚了。

.state('log_in', {
url: '/log-in',
controller: 'controllerJsFile',
templateProvider: function() { return lazyDeferred.promise; },
resolve: {
    load: function($templateCache, $ocLazyLoad, $q, $http) {
        lazyDeferred = $q.defer();

        return $ocLazyLoad.load ({
          name: 'app.logIn',
          files: ['src/controllerJsFile.js']
        }).then(function() {
          return $http.get('src/htmlTemplateFile.tpl.html')
            .success(function(data, status, headers, config) {
              return lazyDeferred.resolve(data);
            }).
            error(function(data, status, headers, config) {
              return lazyDeferred.resolve(data);
            });
        });
    }
},
data: {
  public: true
}

}）

因此，经过一番阅读之后，我意识到我的诺言有问题。我们创建一个称为lazyDeferred的函数，该函数将返回给templateProvider并声明为全局变量。templateProvider等待承诺被兑现。

加载控制器后，我们创建一个XHR / $ http请求以检索模板文件。$ http.get是一个承诺，因此我们可以返回，$
ocLazyLoad.load也是一个承诺，因此我们也可以返回它。最后，我们只需要解决lazyDeferred一个问题，我认为应通过承诺并解决所有问题。

如果这不是很清楚，我深表歉意，我不是100％知道这是如何工作的。

2020-07-04