Lazy load template и контроллер в angular UI-Router

Я пытаюсь ленить загрузить контроллер и шаблон в свой файл router.js UI-Router, но у меня возникают трудности с шаблоном.

Контроллер загружается правильно, но после того, как он загружен, мы должны загрузить шаблон, и в этом случае все идет не так.

После того, как ocLazyLoad загружает контроллер, мы разрешаем обещание Angular, которое также включено в шаблонProvider. Проблема заключается в том, чтобы вернуть обещание (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
 }
})

Ответ 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
}

})

Итак, после некоторого большего чтения, я понял, что у меня была проблема с моим promises. Мы создаем один, называемый lazyDeferred, который должен быть возвращен templateProvider и объявлен как глобальная переменная. templateProvider ждет выполнения обещания.

После загрузки нашего контроллера мы создаем XHR/$http-запрос для извлечения файла шаблона. $http.get - это обещание, поэтому мы можем вернуть это, $ocLazyLoad.load также является обещанием, поэтому мы также можем его вернуть. Наконец, нам просто нужно решить lazyDeferred, и что я думаю, что воздушные шары проходят через promises и разрешают все из них.

Извиняюсь, если это было не очень ясно, я не уверен на 100%, как это работает.

Ответ 2

Если вы хотите лениво загрузить контроллер, я бы предложил следующие подробные ответы:

Если нам нужно динамически загружать HTML-шаблон, это намного проще. Пример из этого Q и A

Пытается динамически устанавливать шаблон в контроллере на основе константы

(рабочий плункер)

$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;
          });
    },

Вы также можете проверить их: