角度 UI-Router 中的延迟加载模板和控制器 [英] Lazy load template and controller in angular UI-Router

问题描述

我试图在我的 UI-Router router.js 文件中延迟加载控制器和模板，但在使用模板时遇到困难.

I am attempting to lazy load a controller and template in my UI-Router router.js file, but am having difficulty with the template.

控制器正确加载，但在加载之后，我们必须加载模板，这就是出错的地方.

The controller loads properly, but after that is loaded, we must load the template and this is where things go wrong.

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

After ocLazyLoad loads the controller, we resolve an Angular promise which is also included in the templateProvider. The issue is instead of returning the promise (templateDeferred.promise) after the file is done loading, the promise is returned as an object.

.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
 }
})

推荐答案

好的，感谢您的回复，但我已经想通了.

Ok, thanks for the responses, but I have figured it out.

.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 等待兑现承诺.

So, after some more reading, I realized I had an issue with my promises. We create one called lazyDeferred which is the one to be returned to templateProvider and is declared as a global variable. templateProvider waits for the promise to be fulfilled.

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

After we load our controller, we create an XHR/ $http request to retrieve the template file. $http.get is a promise so we can return that, $ocLazyLoad.load also is a promise so we can return that as well. Finally, we just need to resolve the lazyDeferred one and that I think balloons through the promises and resolves all of them.

如果这不是很清楚，我很抱歉，我不是 100% 确定这是如何工作的.

I apologize if this was not very clear, I'm not 100% sure of how this works.

这篇关于角度 UI-Router 中的延迟加载模板和控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！