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

我试图在我的UI-Router router.js文件中懒惰加载控制器和模板,但是我对模板有困难.

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

在ocLazyLoad加载控制器之后,我们解析了一个Angular promise,它也包含在templateProvider中.问题是在文件加载完成后返回promise(templateDeferred.promise),而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
 }
})

Rjdlee.. 11

好的,谢谢你的回复,但我已经弄明白了.

.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,并且我认为通过promises气球并解决所有这些问题.

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

好的,谢谢你的回复,但我已经弄明白了.

.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,并且我认为通过promises气球并解决所有这些问题.

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