angular UI-Router 中的延迟加载模板和控制器

Question

我正在尝试在我的 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
 }
})

Answer 1

如果您想延迟加载控制器，我建议您遵循以下详细答案：

angular-ui-router with requirejs, lazy loading of controller

万一我们需要动态加载HTML模板，就容易多了。这个问答中有一个例子

(working plunker)

$stateProvider
  .state('home', {
    url: '/home',
    //templateUrl: 'index5templateA.html',   (THIS WORKS)
    templateProvider: function(CONFIG, $http, $templateCache) {
        console.log('in templateUrl ' + CONFIG.codeCampType);

        var templateName = 'index5templateB.html';

        if (CONFIG.codeCampType === "svcc") {
             templateName = 'index5templateA.html';
        } 
        var tpl = $templateCache.get(templateName);

        if(tpl){
          return tpl;
        }

        return $http
           .get(templateName)
           .then(function(response){
              tpl = response.data
              $templateCache.put(templateName, tpl);
              return tpl;
          });
    },

您也可以检查这些：

Angular UI Router: decide child state template on the basis of parent resolved object
Angular and UI-Router, how to set a dynamic templateUrl

Answer 2

好的，谢谢你的回复，但我已经弄明白了。

.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 的，它是 returned 到 templateProvider 的那个，并被声明为全局变量。 templateProvider 等待 promise 实现。

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

如果这不是很清楚，我深表歉意，我不是 100% 确定它是如何工作的。

angular UI-Router 中的延迟加载模板和控制器

Lazy load template and controller in angular UI-Router

lazy-loading

requirejs

angularjs

angular-ui-router