Lazy laden Vorlage und Controller in eckigen UI-Router

Question

Ich versuche, einen Controller und eine Vorlage in meinem UI-Router router.js Datei zu laden, aber habe Schwierigkeiten mit der Vorlage.

Der Controller wird ordnungsgemäß geladen, aber nachdem das geladen ist, müssen wir die Vorlage laden und das ist, wo die Dinge schief gehen.

Nachdem ocLazyLoad den Controller geladen hat, lösen wir ein Angular-Verspre- chen auf, das auch im templateProvider enthalten ist. Das Problem besteht darin, das Versprechen (templateDeferred.promise) nicht zurückzugeben, nachdem die Datei geladen wurde. Das Versprechen wird als Objekt zurückgegeben.

.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

Ok, danke für die Antworten, aber ich habe es herausgefunden.

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

})

Also, nach etwas mehr lesen, erkannte ich, ich mit meinem Versprechen ein Problem hatte. Wir erstellen einen namens lazyDeferred, der an templateProvider zurückgegeben wird und als globale Variable deklariert wird. templateProvider wartet darauf, dass das Versprechen erfüllt wird.

Nachdem wir unseren Controller geladen haben, erstellen wir eine XHR/$ http-Anfrage, um die Vorlagendatei abzurufen. $ http.get ist ein Versprechen, also können wir das zurückgeben, $ ocLazyLoad.load ist auch ein Versprechen, also können wir das auch zurückgeben. Schließlich müssen wir nur das lazyDevered auflösen und ich denke, dass Ballons durch die Versprechungen Ballons und löst alle von ihnen.

Ich entschuldige mich, wenn das nicht sehr klar war, ich bin nicht 100% sicher, wie das funktioniert.

Answer 2

Falls Sie lazily möchten den Controller laden, würde ich vorschlagen, diese detaillierten Antworten folgen:

• requirejs with angular - not resolving controller dependency with nested route
• angular-ui-router with requirejs, lazy loading of controller

Bei müssen wir laden dynamisch die HTML-Vorlage, es ist viel einfacher. Es ist ein Beispiel aus dieser Q & A

• Trying to Dynamically set a templateUrl in controller based on constant

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

Sie diese überprüfen können auch:

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