Muestra las diferencias entre dos versiones de la página.
unidades:07_rutas:01_justificacion [2014/08/26 20:08] admin |
unidades:07_rutas:01_justificacion [2014/09/15 17:54] (actual) admin |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
====== 7.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á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 ===== | ===== 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 55: | Línea 55: | ||
* Single-Page Interface (SPI) | * Single-Page Interface (SPI) | ||
- | ¿Que ventajas tiene esta forma de trabajar? | + | ¿Qué ventajas tiene esta forma de trabajar? |
- | * La principal ventaja es la rapidez. Las aplicación actuales tiene 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 , solo cambiamos el HTML de la nueva //página//. | + | * 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. ¿Recordais 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? | + | * 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 como 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 otroas dentro de la página principal. | + | 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. |