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.

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:

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.

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:

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.