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/26 09:49]
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** Página de "​Recibidos":​ URL=<​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​**#​inbox**
Línea 29: Línea 29:
  
  
-Ahora analicemos cada una de las URL y las página, para ello volvamos a poner las páginas y sus URLs:+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  ^ ^  Página ​ ^  URL  ^
Línea 37: Línea 37:
  
  
-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 cambiado ​los fragmentos se muestra una cosa u otra. +Sabemos que la parte que hay después de la "#"​ corresponde a una parte dentro de la páginaes decira un fragmento. Por lo tanto las 4 URL corresponden todas a la misma páginaque en este caso es <​nowiki>​https://​mail.google.com/​mail/​u/​0/</​nowiki>​. Es decirque 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 ===== ===== Rutas =====
-Ahora vamos a explicar ​que son las rutas pero para ello vamos a cambiar un poco lo que son nuestros conceptos sobre que es una página , una URL ,etc. Los vamos a redefinir para adecuarlo a como funcionas ​página como gmail y por supuesto ​como se trabaja en AngularJS.+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 ​de esas nuevas //​páginas//​ queremos mostrar. Entonces ​¿que es una ruta?, una ruta el simplemente el nombre de un fragmento ​ya que ahora ya no va a hacer referencia a una parte dentro de la página sino que cambiar la ruta (el fragmento) indica cargar una nueva página dentro de la página //real// que estamos viendo.+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: Ahora podemos volver a mostrar la tabla anterior de la siguiente forma:
Línea 51: Línea 51:
 |Enviados |**sent** | |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.1409039359.txt.gz · Última modificación: 2014/08/26 09:49 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