Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:07_rutas:04_resolve [2014/08/27 08:35]
admin [7.4 Resolve]
unidades:07_rutas:04_resolve [2014/09/16 19:25] (actual)
admin
Línea 1: Línea 1:
 ====== 7.4 Resolve ====== ====== 7.4 Resolve ======
-Ya hablamos en [[unidades:​06_promesas:​01_justificacion#​resueltos_antes_de_llamar_al_controlador|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 [[unidades:​06_promesas:​03_avanzado#​objeto_con_promesas|promesas en paralelo con un objeto]].+Ya hablamos en [[unidades:​06_promesas:​01_justificacion#​resueltos_antes_de_llamar_al_controlador|Resueltos antes de llamar al controlador]] ​de la importancia que tenían las promesas en el servicio de rutas. Ahora vamos a explicar esa importancia y volveremos a usar las [[unidades:​06_promesas:​03_avanzado#​objeto_con_promesas|promesas en paralelo con un objeto]].
  
 Lo que vamos a ver es una funcionalidad del método ''​when''​ de [[unidades:​07_rutas:​02_routeprovider|$routeProvider]]. ​ Lo que vamos a ver es una funcionalidad del método ''​when''​ de [[unidades:​07_rutas:​02_routeprovider|$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 [[unidades:​06_promesas:​03_avanzado#​objeto_con_promesas|promesas en paralelo con un objeto]].+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 similar al objeto que vimos en [[unidades:​06_promesas:​03_avanzado#​objeto_con_promesas|promesas en paralelo con un objeto]].
  
-El objeto ''​resolve''​ contiene en cada una de sus propiedades funciones que retornan promesas ​ ((No hace falta que retorne obligatoriamente promesas , también puede retornar valores directamente)) que se resolverán antes de llamar al controlador y que se pueden acceder desde el controlador si se inyectan en él.+El objeto ''​resolve''​ contiene en cada una de sus propiedades funciones que retornan promesas ​ ((No hace falta que retorne obligatoriamente promesas , también puede retornar valores directamente)) que se resolverán antes de llamar al controlador y a las que se pueden acceder desde el controlador si se inyectan en él.
  
-¿Cual ​es la utilidad de ésto? Para mi son dos: +¿Cuál ​es la utilidad de ésto? Para mí son dos: 
-  * En las directivas. Las directivas a veces necesitan información nada inicializarse, ​ antes de que se compilen ((Ya veremos ​mas adelante ​que es compilar una directiva)). 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 ((Ej. llamar a ''​$http''​)),​ no se tienen los datos a tiempo para la directiva. +  * En las directivas. Las directivas a veces necesitan información nada más inicializarse,​ antes de que se compilen ((Ya veremos ​más adelante ​qué es compilar una directiva)). Si esa información se obtiene del ''​$scope''​ del controlador y aún no está disponible porque el controlador ha hecho una llamada asíncrona ((Ej. llamar a ''​$http''​)),​ 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.+  * 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 ​aún están ​en blanco ya que seguimos ​esperando los datos de la llamada a ''​$http''​. ​Ésto 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.+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, éso es justo lo que hace ''​resolve''​. No navegará hasta la ruta hasta que no estén ​disponibles ​todos los datos que necesitamos.
  
-Veamos ahora un ejemplo de como se usa. como es un poco complejo vamos a ir haciéndolo paso a paso.+Veamos ahora un ejemplo de cómo se usa. Como es un poco complejovamos a ir haciéndolo paso a paso.
  
 ===== El servicio sumaAsincrona ===== ===== El servicio sumaAsincrona =====
Línea 41: Línea 41:
 </​sxh>​ </​sxh>​
  
-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 [[unidades:​03_servicios:​08_factory|3.8 factory]]+Creamos el servicio ''​sumaAsincrona''​ que es una función que acepta 2 parámetros. No deberíamos ​tener problemas ​para entender este código ya que en unidades ​anteriores ​vimos cómo crear servicios. En caso de dudaspuedes repasar el tema [[unidades:​03_servicios:​08_factory|3.8 factory]]
  
 ===== La ruta con el resolve ===== ===== La ruta con el resolve =====
-Ahora vamos a crear una ruta para que haga uso del servicio ''​sumaAsincrona''​ el cual retorna una promesa.+Ahora vamos a crear una ruta para que haga uso del servicio ''​sumaAsincrona''​el cual retorna una promesa.
  
 <sxh js;​highlight:​ [4,​5,​6,​7,​8]>​ <sxh js;​highlight:​ [4,​5,​6,​7,​8]>​
Línea 80: Línea 80:
   * Línea 2: Hacemos uso del valor directamente sin tener que esperarnos.   * Línea 2: Hacemos uso del valor directamente sin tener que esperarnos.
  
 +
 +<note important>​
 +No vamos a ver el caso de que la promesa sea rechazada, ya que se complica un poco cómo tratarlo.
 +Aunque tienes el siguiente blog donde lo explican: [[http://​www.thinkster.io/​angularjs/​o1YnQ52SOd/​angularjs-resolve-routechangeerror|AngularJS - resolve $routeChangeError]]
 +</​note>​
 ===== Parámetros ===== ===== Parámetros =====
-Lo siguiente que vamos a ver ahora es que ocurre si necesitamos que la promesa use los datos de la ruta para hacer los cálculos. Podríamos pensar que es tan sencillo como usar ''​$routeParams''​ pero en el ''​resolve''​ no es posible usar ''​$routeParams''​ sino que tenemos que usar ''​$route.current.params''​.+Lo siguiente que vamos a ver es qué ocurre si necesitamos que la promesa use los datos de la ruta para hacer los cálculos. Podríamos pensar que es tan sencillo como usar ''​$routeParams''​ pero en el ''​resolve''​ no es posible usar ''​$routeParams''​ sino que tenemos que usar ''​$route.current.params''​.
  
 Veamos ahora un ejemplo en el que suponemos que los datos a sumar vienen como parámetros de la ruta. Veamos ahora un ejemplo en el que suponemos que los datos a sumar vienen como parámetros de la ruta.
Línea 107: Línea 112:
 ===== Ejemplo ===== ===== Ejemplo =====
 En este ejemplo lo que hacemos es mostrar 2 páginas llamadas: En este ejemplo lo que hacemos es mostrar 2 páginas llamadas:
-  * ''​pagina1.html'':​ Hacemos 2 sumas asíncronas pero calculamos su valor en el ''​resolve''​. ​Esto hace que se tarde 3 segundos desde que se pincha hasta que se muestra la página. +  * ''​pagina1.html'':​ Hacemos 2 sumas asíncronas pero calculamos su valor en el ''​resolve''​. ​Ésto hace que se tarde 3 segundos desde que se pincha hasta que se muestra la página. 
-  * ''​pagina2.html''​ : También hacemos 2 sumas asíncronas pero calculamos su valor en el controlador . Esto hace que la página se muestre inmediatamente tras pinchar pero los datos no se ven hasta pasados 3 segundos.+  * ''​pagina2.html''​ : También hacemos 2 sumas asíncronas pero calculamos su valor en el controlador. ​Ésto hace que la página se muestre inmediatamente tras pinchar pero los datos no se ven hasta pasados 3 segundos.
  
-En ambos casos los valores para hacer las 2 sumas (4 números en total) se obtiene ​de la ruta. De esa forma se ve la diferencia ​obtener los parámetros en el controlador ((mediante ''​$routeParams''​)) o en el ''​resolve''​ ((mediante ''​$route.current.params''​).+En ambos casos los valores para hacer las 2 sumas (4 números en total) se obtienen ​de la ruta. De esa forma se ve la diferencia ​al obtener los parámetros en el controlador ((mediante ''​$routeParams''​)) o en el ''​resolve''​ ((mediante ''​$route.current.params''​)).
  
-También en ambos casos se hacen 2 sumas para ver como es usar más de una propiedad en el ''​resolve''​.+También en ambos casos se hacen 2 sumas para ver cómo se puede usar más de una propiedad en el ''​resolve''​.
  
 <sxh html;​title:​index.html>​ <sxh html;​title:​index.html>​
Línea 227: Línea 232:
 <sxh html;​title:​pagina1.html>​ <sxh html;​title:​pagina1.html>​
 <​h1>​Soy la pagina 1</​h1> ​ <​h1>​Soy la pagina 1</​h1> ​
-Al mostrar la pagina ​ya se ven los datos:+Al mostrar la página ​ya se ven los datos:
 <br> <br>
 {{mensaje2y3}} {{mensaje2y3}}
Línea 255: Línea 260:
   * [[https://​docs.angularjs.org/​api/​ngRoute/​provider/​$routeProvider|$routeProvider]]   * [[https://​docs.angularjs.org/​api/​ngRoute/​provider/​$routeProvider|$routeProvider]]
   * [[https://​docs.angularjs.org/​api/​ng/​service/​$q|$q]]   * [[https://​docs.angularjs.org/​api/​ng/​service/​$q|$q]]
 +  * [[http://​www.thinkster.io/​angularjs/​o1YnQ52SOd/​angularjs-resolve-routechangeerror|AngularJS - resolve $routeChangeError]]
unidades/07_rutas/04_resolve.1409121352.txt.gz · Última modificación: 2014/08/27 08:35 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0