Diferencias

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

--- unidades:07_rutas:01_justificacion [2014/08/25 20:20]
admin creado
+++ 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 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.1408990832.txt.gz · Última modificación: 2014/08/25 20:20 por admin

Ir hasta arriba