Muestra las diferencias entre dos versiones de la página.
unidades:07_rutas:04_resolve [2014/09/03 16:09] admin [Referencias] |
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]]. | ||
Línea 6: | Línea 6: | ||
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]]. | 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 complejo, vamos 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 dudas, puedes 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 82: | Línea 82: | ||
<note important> | <note important> | ||
- | No vamos a ver el caso de que la promesa sea rechazada, ya que se complica un poco como tratarlo. | + | 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]] | Aunque tienes el siguiente blog donde lo explican: [[http://www.thinkster.io/angularjs/o1YnQ52SOd/angularjs-resolve-routechangeerror|AngularJS - resolve $routeChangeError]] | ||
</note> | </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 112: | 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 a 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 232: | 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}} |