¡Esta es una revisión vieja del documento!

−Tabla de Contenidos

7.4 Resolve

7.4 Resolve

Ya hablamos en Resueltos antes de llamar al controlador sobre la importancia que tenían las promesas en el servicio de rutas. Ahora vamos a explicar esa importancia y volveremos a usar las promesas en paralelo con un objeto.

Lo que vamos a ver es una funcionalidad del método when de $routeProvider.

Al definir una ruta , en el método when, le pasamos un objeto con las propiedades templateUrl y controller. Este objeto puede tener más propiedades que no vamos a ver excepto la propiedad resolve. Esta propiedad la podemos ver como el objeto que vimos en promesas en paralelo con un objeto.

El objeto resolve contiene en cada una de sus propiedades funciones que retornan promesas ¹⁾ que se resolverán antes de llamar al controlador y que se pueden acceder desde el controlador si se inyectan en él.

¿Cual es la utilidad de ésto? Para mi son dos:

En las directivas. Las directivas a veces necesitan información nada inicializarse, antes de que se compilen ²⁾. Si esa información se obtiene del $scope del controlador y no aun no está disponible porque el controlador ha hecho una llamada asíncrona ³⁾, no se tienen los datos a tiempo para la directiva.
En la página HTML: Si la página muestra datos que se cargan en el controlador mediante $http ((o similar), podemos ver la página ya cargada pero los campos aun en blanco ya que aun estamos esperando los datos de la llamada a $http. Esto queda un poco mal para el usuario ya que ve una página sin datos y un instante después aparecen por arte de mágia los datos.

La solución a estos 2 problemas sería hacer las llamadas asíncronas antes de mostrar la página y no mostrar la página hasta que no se hayan obtenido los datos. Pues bien , eso es justo lo que hace resolve. No navegará hasta la ruta hasta que no estén todos los datos que necesitamos disponibles.

Veamos ahora un ejemplo de como se usa. como es un poco complejo vamos a ir haciéndolo paso a paso.

El servicio sumaAsincrona

Lo primero que vamos a hacer es volver a usar la función que creamos para las promesas de sumaAsincrona, pero vamos a transformarla en un servicio ya que ahora se usará en otro sitio además del controlador.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

app.factory("sumaAsincrona",['$q','$timeout',function($q,$timeout) {
   
  return function (a,b) {
     var defered=$q.defer();
     var promise=defered.promise;
       
     $timeout(function() {
        try{
           var resultado=a+b;
           defered.resolve(resultado);
        } catch (e) {
           defered.reject(e);
        }   
     },3000); 
       
     return promise;
  } 
   
}]);

Creamos el servicio sumaAsincrona que es una función que acepta 2 parámetros. No se deberían tener problemas en entender este código ya que en unidades anterior vimos como crear servicios. En caso de dudas puedes repasar el tema 3.8 factory

La ruta con el resolve

Ahora vamos a crear una ruta para que haga uso del servicio sumaAsincrona el cual retorna una promesa.

1

2

3

4

5

6

7

8

9

$routeProvider.when('/pagina1', {
  templateUrl: "pagina1.html",
  controller: "Pagina1Controller",
  resolve: {
    suma2y3:['sumaAsincrona',function(sumaAsincrona) {
      return sumaAsincrona(2,3);
    }]
  }
});

Línea 4: Definimos un nuevo objeto llamado resolve.
Línea 5: La propiedad del objeto resolve se llama suma2y3 y es una función a la que se le inyecta el servicio de sumaAsincrona. Posteriormente en el controlador podremos inyectar un servicio llamado suma2y3 que contendrá el resultado de la promesa.
Línea 6: Retornamos la promesa que ha creado sumaAsincrona.
Línea 7: Cerramos el array y la función.
Línea 8: Cerramos el objeto resolve.

Al definir así la ruta , no se navegará hasta la página hasta que no se haya resuelto la promesa.De esa forma al llamar al controlador ya tendremos el dato calculado.

El uso desde el controlador

Ahora en el controlador ya podemos inyectar un nuevo servicio llamado suma2y3 cuyo valor será el resultado de la promesa.

1

2

3

app.controller("Pagina1Controller", ["$scope","suma2y3",function($scope,suma2y3) {
   $scope.mensaje2y3="suma de 2 y 3 es " + suma2y3;
}]);

Línea 1: Inyectamos el servicio suma2y3 el cual existe gracias al resolve de la ruta.
Línea 2: Hacemos uso del valor directamente sin tener que esperarnos.

Ejemplo

Referencias

¹⁾ No hace falta que retorne obligatoriamente promesas , también puede retornar valores directamente

²⁾ Ya veremos mas adelante que es compilar una directiva

³⁾ Ej. llamar a $http

unidades/07_rutas/04_resolve.1409084125.txt.gz · Última modificación: 2014/08/26 22:15 por admin

Ir hasta arriba