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=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áginas. 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 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 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)
¿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.