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

问题描述

我试图延迟加载在我的UI-路由器router.js文件控制器和模板，但我有与模板的难度。

控制器正确加载，但加载后，我们必须加载模板，这是哪里出了问题。

ocLazyLoad加载控制器后，我们解决了角度许其也包括在templateProvider。问题是，而不是文件加载完成后，承诺会返回一个对象返回的承诺（templateDeferred.promise）。

  .STATE（'log_in'，{
    网址：'/登录'，
    控制器：'controllerJsFile'，
    templateProvider：函数（$ Q $ HTTP）{
      变种templateDeferred = $ q.defer（）;        lazyDeferred.promise.then（功能（templateUrl）{
        $ http.get（templateUrl）
        .success（功能（数据，状态，头，配置）{
            templateDeferred.resolve（数据）;
        }）。
        错误（功能（数据，状态，头，配置）{
            templateDeferred.resolve（数据）;
        }）;
  }）;
  返回templateDeferred.promise;
 }，
 解析：{
    载：函数（$ templateCache，$ ocLazyLoad，$ Q）{
        lazyDeferred = $ q.defer（）;        VAR lazyLoader = $ ocLazyLoad.load（{
          文件：['SRC / controllerJsFile']
        }）。然后（函数（）{
          返回lazyDeferred.resolve（'SRC / htmlTemplateFile'）;
        }）;
        返回lazyLoader;
    }
 }，
 数据：{
  市民：真
 }
}）
 

解决方案

好了，感谢您的答复，但我已经想通了。

  .STATE（'log_in'，{
网址：'/登录'，
控制器：'controllerJsFile'，
templateProvider：函数（）{返回lazyDeferred.promise; }，
解析：{
    载：函数（$ templateCache，$ ocLazyLoad，$ Q $ HTTP）{
        lazyDeferred = $ q.defer（）;        返回$ ocLazyLoad.load（{
          名称：'app.logIn'，
          文件：['SRC / controllerJsFile.js']
        }）。然后（函数（）{
          返回$ http.get（'SRC / htmlTemplateFile.tpl.html'）
            .success（功能（数据，状态，头，配置）{
              返回lazyDeferred.resolve（数据）;
            }）。
            错误（功能（数据，状态，头，配置）{
              返回lazyDeferred.resolve（数据）;
            }）;
        }）;
    }
}，
数据：{
  市民：真
}
 

}）

所以，多了一些阅读后，我意识到，我有一个问题，我的承诺。我们创建一个名为lazyDeferred要被返回到templateProvider所述一个和声明为全局变量。 templateProvider等待要履行诺言。

在我们载入我们的控制器，我们创建了一个XHR / $ HTTP请求来检索模板文件。 $ http.get是一个承诺，所以我们可以返回，$ ocLazyLoad.load也是一个承诺，所以我们可以回到这一点。最后，我们只需要解决lazyDeferred之一，我认为通过承诺气球和解决所有的人。

我道歉，如果这不是很清楚，我不是100％肯定这是如何工作的。

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.

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
}

})

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.

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.

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

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