stateparams - ui router angularjs template

Plantilla de carga difusa y controlador en UI-Router angular

Question

Estoy intentando cargar un controlador y una plantilla en el archivo router.js de UI-Router, pero tengo dificultades con la plantilla.

El controlador se carga correctamente, pero después de que se cargue, debemos cargar la plantilla y aquí es donde las cosas van mal.

Después de que ocLazyLoad cargue el controlador, resolvemos una promesa angular que también se incluye en templateProvider. El problema es que en lugar de devolver la promesa (templateDeferred.promise) después de que el archivo termine de cargarse, la promesa se devuelve como un objeto.

.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, gracias por las respuestas, pero lo he descubierto.

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

})

Entonces, después de leer un poco más, me di cuenta de que tenía un problema con mis promesas. Creamos uno llamado lazyDeferred que es el que se devuelve a templateProvider y se declara como una variable global. templateProvider espera a que se cumpla la promesa.

Después de cargar nuestro controlador, creamos una solicitud XHR / $ http para recuperar el archivo de la plantilla. $ http.get es una promesa para que podamos devolver eso, $ ocLazyLoad.load también es una promesa para que podamos devolver eso también. Finalmente, solo tenemos que resolver el perezoso diferido y creo que globos cumple las promesas y los resuelve todos.

Me disculpo si esto no fue muy claro, no estoy 100% seguro de cómo funciona esto.

Answer 2

En caso de que quiera cargar el controlador de forma perezosa, le sugiero que siga estas respuestas detalladas:

• requirejs con angular: no se resuelve la dependencia del controlador con la ruta anidada
• angular-ui-router con requirejs, carga lenta del controlador

En caso de que necesitemos cargar dinámicamente la plantilla HTML, es mucho más fácil. Hay un ejemplo de esta Q & A

• Intentando establecer dinámicamente una plantillaUrl en el controlador en función de la constante

(el plunker de trabajo )

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

Usted puede verificar esto también:

• Enrutador de IU angular: decide la plantilla de estado hijo en función del objeto resuelto por el padre
• Angular y UI-Router, cómo configurar una plantilla dinámicaUrl