Diferencias

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

Enlace a la vista de comparación

unidades:07_rutas:01_justificacion [2014/08/25 22:56]
admin
unidades:07_rutas:01_justificacion [2014/09/15 17:54] (actual)
admin
Línea 1: Línea 1:
-====== Justificación ====== +====== ​7.1 Justificación ====== 
-Las rutas son un concepto ya establecido en las aplicaciones actuales pero que quizás no nos hayamos dado cuenta ​aun. Para empezar a entenderlas vamos primero a ver unas capturas de pantalla de gmail.+Las rutas son un concepto ya establecido en las aplicaciones actuales pero quizás no nos hayamos dado cuenta ​aún de ello. Para empezar a entenderlas vamos primero a ver unas capturas de pantalla de gmail.
  
 +Página de "​Recibidos":​ URL=<​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​**#​inbox**
  
 +{{:​unidades:​07_rutas:​gmail-inbox.png?​nolink|}}
 +
 +\\
 +
 +Página de "​Importantes":​ URL=<​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​**#​imp**
 +
 +{{:​unidades:​07_rutas:​gmail-imp.png?​nolink|}}
 +
 +\\
 +
 +Página de "​Enviados":​ URL=<​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​**#​sent**
 +
 +{{:​unidades:​07_rutas:​gmail-sent.png?​nolink|}}
 +
 +\\
 +
 +Página de "​Todos":​ URL=<​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​**#​imp**
 +
 +{{:​unidades:​07_rutas:​gmail-all.png?​nolink|}}
 +
 +\\
 +
 +
 +
 +
 +Ahora analicemos cada una de las URL y las páginas. Para ello volvamos a poner las páginas y sus URLs:
 +
 +^  Página ​ ^  URL  ^
 +|Recibidos ​ |<​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​**#​inbox** |
 +|Importantes ​ |<​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​**#​imp** |
 +|Enviados |<​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​**#​sent** |
 +
 +
 +Sabemos que la parte que hay después de la "#"​ corresponde a una parte dentro de la página, es decir, a un fragmento. Por lo tanto las 4 URL corresponden todas a la misma página, que en este caso es <​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​. Es decir, que en este ejemplo, la aplicación de gmail está en una única página llamada <​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>,​ pero cambiando los fragmentos se muestra una cosa u otra. 
 +
 +===== Rutas =====
 +Ahora vamos a explicar qué son las rutas pero para ello vamos a cambiar un poco lo que son nuestros conceptos sobre qué es una página , una URL ,etc. Los vamos a redefinir para adecuarlo a cómo funciona una página como gmail y por supuesto cómo se trabaja en AngularJS.
 +
 +Realmente la aplicación de gmail tiene muchas //​páginas//​ aunque en la barra del navegador siempre estemos en la misma página. Y los fragmentos de las URL realmente nos indican ​ esas nuevas //​páginas//​ que queremos mostrar. Entonces ¿qué es una ruta?, una ruta es simplemente el nombre de un fragmento pero que ahora ya no va a hacer referencia a una parte dentro de la página sino que ahora cambiar la ruta (el fragmento) indica cargar una nueva página dentro de la página //real// que estamos viendo.
 +
 +Ahora podemos volver a mostrar la tabla anterior de la siguiente forma:
 +
 +^  Página ​ ^  Ruta  ^
 +|Recibidos ​ |**inbox** |
 +|Importantes ​ |**imp** |
 +|Enviados |**sent** |
 +
 +Ahora tenemos una página real que es <​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​ y dentro de ella cargamos nuevas páginas dependiendo de la ruta (fragmento) que pongamos. Esta forma de trabajar se llama:
 +  * Single-Page Application (SPA)
 +  * Single-Page Interface (SPI)
 +
 +¿Qué ventajas tiene esta forma de trabajar? ​
 +
 +  * La principal ventaja es la rapidez. Las aplicaciones actuales tienen mucho CSS, JavaScript , etc. Al tener una única página real, se carga todo ello al principio una única vez y cuando cambiamos de //página// todo lo anterior ya está cargado , y sólo cambiamos el HTML de la nueva //​página//​. ​
 +  * Otra ventaja es que podemos mantener nuestro estado en variables JavaScript ya que nunca salimos de la página , lo que nos simplifica mucho el desarrollo. ¿Recordáis cuando navegar a otra página podía implicar pasar muchas cosas en la URL para pasar el estado de la aplicación de una página a otra?
 +
 +Pues después de todo ésto, en el siguiente tema vamos a ver cómo funciona el servicio de rutas de AngularJS que nos permitirá tener una única página y en función de las rutas cargar unas páginas u otras dentro de la página principal.
unidades/07_rutas/01_justificacion.txt · Última modificación: 2014/09/15 17:54 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