¡Esta es una revisión vieja del documento!


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.

Página de “Recibidos”: URL=https://mail.google.com/mail/u/0/#inbox


Página de “Importantes”: URL=https://mail.google.com/mail/u/0/#imp


Página de “Enviados”: URL=https://mail.google.com/mail/u/0/#sent


Página de “Todos”: URL=https://mail.google.com/mail/u/0/#imp


Ahora analicemos cada una de las URL y las página, para ello volvamos a poner las páginas y sus URLs:

Página URL
Recibidos https://mail.google.com/mail/u/0/#inbox
Importantes https://mail.google.com/mail/u/0/#imp
Enviados https://mail.google.com/mail/u/0/#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 https://mail.google.com/mail/u/0/. Es decir que en este ejemplo, la aplicación de gmail está en una única página llamada https://mail.google.com/mail/u/0/, pero cambiado los fragmentos se muestra una cosa u otra.

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.

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.

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 https://mail.google.com/mail/u/0/ 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)

¿Que 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.
  • 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?

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.

unidades/07_rutas/01_justificacion.1409039958.txt.gz · Última modificación: 2014/08/26 09:59 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
Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola
Política de cookies +