Lazy szablon obciążenia i kontroler w kątowej UI-router

Question

Próbuję leniwy załadować kontroler i szablon w moim pliku router.js routera UI, ale mam trudności z szablonu.

Sterownik ładuje się poprawnie, ale po załadowaniu musimy załadować szablon i właśnie tam coś pójdzie nie tak.

Po załadowaniu sterownika ocLazyLoad rozwiązujemy obietnicę kątową, która jest również zawarta w templateProvider. Problem polega na tym, że zamiast zwracania obietnicy (templateDeferred.promise) po załadowaniu pliku obietnica jest zwracana jako obiekt.

.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, dzięki za odpowiedzi, ale mam zdobione.

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

})

Więc po pewnym więcej czytania, zdałem sobie sprawę, miałem problem z moich obietnic. Tworzymy jeden o nazwie lazyDeferred, który jest zwracany do templateProvider i jest zadeklarowany jako zmienna globalna. templateProvider czeka na spełnienie obietnicy.

Po załadowaniu kontrolera tworzymy żądanie XHR/$ http, aby pobrać plik szablonu. $ http.get to obietnica, którą możemy zwrócić, $ ocLazyLoad.load również jest obietnicą, więc możemy to również zwrócić. Wreszcie, musimy po prostu rozwiązać problem LazyDeferred i że myślę, że balony przepełniają obietnice i rozwiązuje je wszystkie.

Przepraszam, jeśli to nie było zbyt jasne, nie jestem w 100% pewien, jak to działa.

Answer 2

W przypadku chcesz leniwie załadować sterownik, proponuję następujące szczegółowe odpowiedzi:

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

W przypadku musimy załadować dynamicznie szablon HTML, jest o wiele łatwiejsze. Jest to przykład od tego Q &

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

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

można sprawdzić te, jak również:

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